Add a Font to a Website

How to add some non-standard font to a website?

This could be done via CSS:

<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).

How do I install a custom font on an HTML site

Yes, you can use the CSS feature named @font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.

You declare it in the CSS like this:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Then, you can just reference it like the other standard fonts:

 h3 { font-family: Delicious, sans-serif; }

So, in this case,

<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>

And you just need to put the JUNEBUG.TFF in the same location as the html file.

I downloaded the font from the dafont.com website:

http://www.dafont.com/junebug.font

How do I add custom fonts?

download your font and put in any directory. here i added in fonts directory

   <style>
@font-face {
font-family: 'maven_pro_light_300regular';
src: url('fonts/mavenprolight-300-webfont.eot');
src: url('fonts/mavenprolight-300-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/mavenprolight-300-webfont.ttf') format('truetype'),
url('fonts/mavenprolight-300-webfont.woff') format('woff'),
url('fonts/mavenprolight-300-webfont.svg#maven_pro_light_300regular') format('svg');
font-weight: normal;
font-style: normal;
}

</style>

and you can use it by follow example:

<style>
h2{
font-family:maven_pro_light_300regular;
}
</style>

Add a font to a website

Not all browser support .ttf. Use a font generator to get all the font types ( I use font2web ) and then just add the fonts via @font-face:

@font-face {
font-family: 'fontName';
src: url('../fonts/fontName.eot');
src: url('../fonts/fontName.eot?iefix') format('eot'),
url('../fonts/fontName.woff') format('woff'),
url('../fonts/fontName.ttf') format('truetype'),
url('../fonts/fontName.svg#fontName') format('svg');
font-weight: normal;
font-style: normal;
}

Read here about browser font support.

How to use a font installed in your computer, to a web site?

You need to create a font kit.

This site will do it for you: http://www.fontsquirrel.com/tools/webfont-generator

However, it will not let you use a copyrighted font. Not all the font files on your computer are authorized for web use, but you can buy the license from the creater (these typically have a high price tag).



Related Topics



Leave a reply



Submit