How to Use @font-face in CSS

@font-face, the amazing font replace-r for web browsers. When you are tired of looking at Arial, call on @font-face! When you need a script font and you cannot deal with Times New Roman in italics, call on @font-face! When you cannot make Verdana's font weight any lighter for a clean looking font, what will you call upon? @font-face!

The CSS property @font-face isn't a new concept. It has been out for years! However the amount of fonts allowed online was limited, everyone and everything had a license (as still do) or restriction. If you don't get permission for the fonts you use, there can be some real trouble.

There are a lot of solutions to this issue, websites such as Typekit or Fontspring offer many of the fonts you are looking for, but for a fee. This can become irritating as the amount of websites you want to change fonts for grows, the price grows. As alternatives, there are sites like Font Squirrel or Fonts 2 U that each give hundreds of free fonts and @font-face kits for you to install on your own, with licenses included.

Preferrably, you are going to want an entire font-face kit that includes multiple types of the same font you are going to use. This includes .ttf, .otf, .svg and .eot. View other types of font formats and their uses.

First Things First

You are going to want to browse these sites for the perfect font or two to embed on your pages. This can take some time so think carefully... but luckily these websites usually offer a preview of your own text.

Once you have found a font that pleases your eye (and preferably your visitors eyes as well), create within your site directory a font folder or even just place them together in a good memorable place. The folder makes things more organized so if you want to change later, you won't have to search for them.

@font-face, CSS Property

After you have placed your fonts in their folder, open up your CSS file or a new one if you would like and prepare to type.

 

@font-face {
    font-family: 'GreyscaleBasicRegular';

 

Here you are simply declaring a selector and then adding your average font-family statement in between. The great part about @font-face is that with the font-family property, you can name your new font anything you'd like, so that later it is easier to remember. The font renamed here was originally named "Greyscale_Basic_Regular-webfont", as you will see in a moment.

Now you want to reference the font files that you would like to use. Remember, different browsers use different types of fonts, so make sure that you have those basic four as mentioned above.

 

@font-face {
    font-family: 'GreyscaleBasicRegular';
    src: url('/fonts/Greyscale_Basic_Regular-webfont.eot');
    src: url('/fonts/Greyscale_Basic_Regular-webfont.eot?iefix') format('eot'),
         url('/fonts/Greyscale_Basic_Regular-webfont.woff') format('woff'),
         url('/fonts/Greyscale_Basic_Regular-webfont.ttf') format('truetype'),
         url('/fonts/Greyscale_Basic_Regular-webfont.svg#webfontx4qV1yPH') format('svg');
}

 

As you can see, each font format is referenced in the same folder, and are all the same font. Here we make sure we echo the fact that it is an .eot font or a .woff font. Now you are going to want to declare your font-weight and font style.

Internet Explorer can only link to fonts in the proprietary EOT font format. If you have purchased a font and want it to show up in IE, you can create EOT fonts using the Microsoft WEFT tool, available only on Windows. Only .ttf and .otf fonts can be changed into EOT format, OpenType PS (also .otf) fonts cannot be used.

 

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

 

This is the regular font and so the font-weight is normal and the style is as well. If your @font-face kit came with bold font formats and italic ones, you can do one of two things.

1. You can declare your @font-face selector once and simply change the font-weight and font-style to say either "font-weight:bold" or "font-style:italic", etc. This is an easy way out, it may or may not be recommended, as the font might not hold together.

2. Your second and best bet is to redeclare your font formats and files as separate CSS properties.

 

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

}

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

}

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

}

 

The font weights and styles are left at normal because normally, those fonts are created separately as bold or italic etc. So basically, you are adding your font family name, font resource and styles to @font-face.

You can apply up to 8 or 9 weights to your fonts now. View this sample

Calling Your Fonts to Work

After all the preparation, you are going to want to apply your fonts to something. Personally, I like to have two separate but complementary fonts to use, one as body copy and one for headers and titles.

As usual, choose a tag, id or class as your selector and simply apply the font-family property to it.

 

body {
width: 100%;
font-family:GreyscaleBasicRegular,Helvetica,sans-serif;
font-size: 16px;
text-align:left;
}

 

You can declare your font with or without quotes (I've tested) and always remember to add your fallback fonts such as Helvetica or Times New Roman, just in case of emergency. Older browsers will use Helvetica or a sans-serif font as a backup.

Other Languages

Now you may want to use fonts but by using different symbols. You will have to find fonts that match with your operating system to help smooth out and display fonts properly. AAT for Mac OS and .otf for Windows and Linux will make sure text shaping, where the display of a given character is affected by the characters surrounding it, will display the right way. You can find fonts created in different languages now since @font-face allows you to embed any (legal) font.

Cross-Site Font Usage

By default, Firefox 3.5 only allows fonts to be loaded for pages served from the same site. This prevents sites from freely using fonts found on other sites. For sites that explicitly want to allow cross-site font sharing, an online font library for example, Firefox 3.5 supports the use of access control headers to control this behavior. By adding an additional header to the HTTP headers sent with font files, sites can enable cross-site usage.

 

# example Apache .htaccess file to add access control header
 
<FilesMatch ".(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

 

With this HTTP header enabled, any page can access the fonts on this site, not just pages from the same site.

Font Licensing

Before embedding a font, check to see if the font has a license for usage. Just like a piece of art, which technically a font face is, people want to protect their work from plagarism and distribution. It is only fair that they can restrict use of their hard work, so just make a simple check around the website for a license. If you cannot find a license, check with the website's owner, they should know everything about the fonts that they put up. If not, they themselves may have stolen it and it would not be a good idea to get yourself into trouble too. Choose your fonts carefully.

Enjoy working with @font-face!

Add comment


Security code
Refresh

Related Lessons

Search

Visit fbetting.co.uk Betfair Review