How to Use @font-face CSS3

September 21, 2010 in Design, Tutorials

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.

You want to first go into your stylesheet and declare the @font face rule. Here is an example:

@font-face {
	font-family: Neuropol;
	src: url('NEUROPOL.ttf');
}

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.

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:

h1 {
	font-family: Neuropol, sans-serif;
}

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:

@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;
}

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.
That’s it. Simple as that.

Tags: @font-face, CSS, css3, face, font, stylesheet