How to Use @font-face CSS3

So a lot of people have been trying to implement different fonts using CSS3 @font-face rule but have had trouble actually doing so. Here’s a run-down of how to implement @font-face for use on your websites.

1. Declaration of @font-face syntax

You want to first go into your stylesheet and declare the @font face rule. Here is an example:
[CSS]
@font-face {
font-family: Neuropol;
src: url(‘NEUROPOL.ttf’);
}
[/CSS]
Before I go any further, let me first explain each line. We first declare the @font-face rule. Then we declare a font-family and give it a name. Make sure this is declared BEFORE the font is called later on (best practice is to declare it after the body rule). In this example I named it “Neuropol” which is the same name as the actual font. However you can name it anything you want. It doesn’t necessarily have to be the same name as the actual font (Hell, you can even call it “PrancingPony” if you wanted to). But just remember, you will use this name to declare the font-family used for other elements on your web page. Also, don’t forget that the font name is case sensitive.

The next line is the actual source url for the actual font file. Just remember, you can only use Opentype (.otf) and TrueType (.ttf) extension fonts. Also, for best use, make sure that the actual font file is located in the same folder/location as your actual stylesheet.

 

2. Example of use

Now that we have declared the font-family, we can now use it to style different text elements within our page to display that font. Here as an example of the font used for an h1 tag:
[CSS]
h1 {
font-family: Neuropol, sans-serif;
}
[/CSS]
 

3. Multiple @font-face rules

Also, if for other reasons you want to display more than one type of font, all you have to do is declare another @font-face rule. Just remember to keep all your @font-face rules before they are called. Here is an example for displaying other fonts:
[CSS]
@font-face {
font-family: Rockwell;
src: url(‘Rockwell.otf’);
}

@font-face {
font-family: Micra;
src: url(‘Micra.ttf’);
}

h2 {
font-family: Rockwell, serif;
}

h3, p {
font-family: Micra, serif;
}
[/CSS]
As you can see from the previous example, all the h2 headers will now display the Rockwell font and the h3 header and paragraph tags will now display the Micra font.

 

4. Bullet-proof @font-face syntax

However, the most bullet-proof way of adding the @font-face rule is to be able to render it in various browsers. So far, I have only shown you two different web font formats (.otf and .ttf). This only applies to most current browsers. Here is an example of the best way to incorporate the @font-face rule:
[CSS]
@font-face {
font-family: ‘FontName’;
src: url(‘webfont-name.eot?#iefix’) format(’embedded-opentype’), /*needs to be first for IE browsers*/
url(‘webfont-name.woff’) format(‘woff’), /* mozilla browsers */
url(‘webfont-name.ttf’) format(‘truetype’), /* most current browsers. Similar to .otf */
url(‘webfont-name.svg#svgFontName’) format(‘svg’); /* webkit browsers */
}
[/CSS]
This will ensure that most major browsers will render your webfonts corrently.

 

5. Conclusion

As you can see, it is very easy to include the @font-face rule to your own stylesheets and can help create beautiful typography within your site. If you would like to see free web-fonts to use for your websites, you can visit Google’s ever-growing vast selection of webfonts free for use.

One thought on “How to Use @font-face CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *