Using @font-face webfonts

Choose your font

First thing, you need to choose the fonts you want to use on your website. I get most of mine from Font Squirrel. The cheeky little squirrel has horded himseld a pretty good selection and theres even have a @font-face generator in case they don't have the font you need. I think it’s still a bit of a hazy subject, but I always get a bit cautious when it comes to licenses so I tend to avoid generating my own web fonts.

For the purpose of this tutorial I'll be using DejaVu Sans Book, which you may recognise as the body font I'm using on this website. Go ahead and download the @font-face kit.

The Font Files

The @font-face kit should come down in a .zip file, open that up and you should have a whole bunch of files. Check the file extensions, .ttf, .woff, .svg and .eot are the ones we’ll be using. The DejaVu Sans typeface I linked to above has quite a few different fonts and weights; we just want DejaVu Sans Book so look for and pick out these four files:

• DejaVuSans-webfont.ttf
• DejaVuSans-webfont.woff
• DejaVuSans-webfont.svg
• DejaVuSans-webfont.eot

There are a couple of other files in there too, which you can ignore for now. Why are there so many files!?! Basically you need these four filetypes for each browser/device as follows:

• TrueType Fonts for Firefox upto 3.5, Opera 10+, Safari 3.1+, Chrome 4
• EOT fonts for Internet Explorer 4-8
• WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG fonts for iPad and iPhone

Put these four files in a folder on your site, anywhere really depending on how you structure your site. I tend to keep all of my resources in a media folder, so for example my stylesheets live in mohunky.com/media/css/ so I put my font files under mohunky.com/media/fonts/. Take a note of where you put them as you’ll need this in a moment.

It's code time

Awesome, the files are in place and we're ready to get on with the code. There are just two bits of CSS you need to know to use your shiny new web font. The first is the @font-face rule which you use to describe the font and point out where you left the files. The second is the font-family property which I’ll get to in just a second.

So on with the @font-face rule, open up your stylesheet (e.g. screen.css or stylesheet.css) and copy the following code and paste it at the bottom of the document (Well, positioning is personal preference, you could put it anywhere you like in there but I prefer to keep it out of the way, in some cases I've put it in a seperate webfonts.css).

@font-face {
	font-family: 'DejaVuSansBook';
	src: url('/media/fonts/DejaVuSans-webfont.eot'); /* IE9 Compat Modes */
	src: url('/media/fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/media/fonts/DejaVuSans-webfont.woff') format('woff'),
	     url('/media/fonts/DejaVuSans-webfont.ttf') format('truetype'),
	     url('/media/fonts/DejaVuSans-webfont.svg#webfontDSbtRiqx') format('svg');
	font-weight: normal;
	font-style: normal;
    }

So what’s all this then?

@font-face {

This opens the rule. Everything between the curly brackets { } is called the declaration.

    font-family: 'DejaVuSansBook';

This property is used to name the font. You could call it anything you like but it’s usually a sensible idea to use its actual name. Jot down this name as you’ll need it later.

	src: url('/media/fonts/DejaVuSans-webfont.eot'); /* IE9 Compat Modes */
	src: url('/media/fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/media/fonts/DejaVuSans-webfont.woff') format('woff'),
	     url('/media/fonts/DejaVuSans-webfont.ttf') format('truetype'),
	     url('/media/fonts/DejaVuSans-webfont.svg#webfontDSbtRiqx') format('svg');

These properties tell the browser where to find the files. Remember I said earlier to jot down where you left those four font files? Ta-da. As I said I always put mine under /media/fonts/ and that’s the path you can see I've used above. If you’ve put your files in a different folder then replace the ‘media/fonts’ in your CSS with the folder structure you’ve used. Remember to start with a / and from the root of your website.

    font-weight: normal;
    font-style: normal;
}

Lastly the font-weight and font-style properties are reset to normal and the curly bracket to close the rule. It’s a good idea to include the font-weight and font-style resets as I’ve had a few instances where I didn’t include them and a browser has done some strange things to the type. (Pointed out to me by @GarryAylott ).

Now all you need to do is use the font-family property to use the font wherever you please. You do this by using the name you set in the @font-face rule as a value in the font-family property.

Examples

I’ve got DejaVu Sans Book set as the font for all my <p> tags so I’ve added this CSS to my stylesheet:

p { font-size:1.2em; font-family:'DejaVuSansBook', Arial, sans-serif; }

or in short hand:

p { font: 1.2em 'DejaVuSansBook', Arial, sans-serif; }

If you don’t want to set every paragraph on your website to use the Déjà vu Sans Book font then you could try creating a class, or adding to a class you already have like this:

.UseMyWebfont { font-family:'DejaVuSansBook', Arial, sans-serif; }

Or another example you could just set your heading 1 style to use the font:

h1 { font-family:'DejaVuSansBook', Arial, sans-serif; }

I’m sure you get the picture. I hope that helps anyone looking to use @font-face for the first time. If anything needs clarifying or you just want to show off how you got on then drop me a mail or grab me on twitter.

If you found this useful feel free to spread the word!

Tweet

This post was written by

Rob Mayes

Freelance Designer, into downhill biking, basketball, gaming and cider. Love to learn and fan of general randomness.