CSS 3: Custom Fonts Using @font-face

/ CSS / by Paul Robinson / 23 Comments
This post was published back on May 19, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

That’s right, our prayers have been answered. We can now have any font we like on our website just by using the @font-face property now included with CSS. With @font-face being a CSS rule custom fonts are generated natively in our browsers, this means there’s no need for canvas/VML alternatives like Cufon, or even flash replacements like sIFR.

Browser Compatibility

From my own testing I can confirm that the latest versions of Firefox, Google Chrome & Safari show the @font-face rule wonderfully. Here is a list showing compatibility for all the popular browsers. The version number is the version at which support was first introduced. It also shows what font file types are supported.

  • Firefox 3.5: TTF (True Type), OTF (Open Type)
  • Firefox 3.6: TTF (True Type), OTF (Open Type), WOFF (Web Open Font Format)
  • Safari 3.1: TTF (True Type), OTF (Open Type)
  • Opera 10: TTF (True Type), OTF (Open Type)
  • Internet Explorer 4: EOT (Embedded Open Type)
  • iPhone/iPad iOS 4.1 or lower: SVG (Scalable Vector Graphics)
  • iPhone/iPad iOS 4.2+: TTF (True Type)
  • iPhone/iPad iOS 5+: TTF (True Type), WOFF (Web Open Font Format)

The Syntax

The syntax for @font-face is quite different to other CSS properties. It is more like a selector, or a rule. Here is how it’s used:

You can use quotes or single quotes around the name & url if you wish. That is the basic setup though. I am unsure as to whether you can define more than one font per @font-face rule. Every time I have tried it fails, so I’d advise using a new @font-face rule for each font you wish to include.

To support multiple browsers at once, if you have all the relevant font files, you can use something like the following to define multiple sources:

As you may have noticed, local, is something I haven’t mentioned. This just checks your computer for a font matching the name and loads it. Although unlikely, it’s good to check as it is one less thing to load if the visitor does have the font.

All of the different formats are for the different browsers, as mentioned in the browser compatibility list above. If you have a font that doesn’t have these formats you can use a font converter, but please be wary of the potential copyright problems that I mention later in this post.

One other thing to know about defining a @font-face font is that you can define alternate weights and styles. Take a look at this:

Once you’ve done this you can use these different weights incredibly easily. We’ll take a look at how to do that after we have looked at how to use a declared font normally.

Using Your Declared Font

So how do you use your newly declared font? Well, it’s actually pretty simple. You use it like any other font, with the font-family property. Just set the value to the name use used when defining your font via @font-face. Like this:

Pretty simple. If you have declared multiple weights it is very simple to use those too.

That will use the bold version. Just be aware that while you can still use weights/styles that you have not declared fonts for, it will apply something users of Photoshop may be familiar with. Faux bold. Unfortunately the browser’s version is no where near as good as Photoshop’s and (generally) miles away from the actual bold version of the font. So please, if your font has various styles make sure to add an @font-face declaration for each of them.

Copyright Issues

One massive road block with using fonts is copyright & licensing issues. Many a time a client has asked if they can use a certain font & I’ve had to say no, because they don’t allow web use. Or alternatively they didn’t want to pay the fee (sometimes yearly) if it was available for web use. Please be sure before you use a font that that it’s license allows you to use it on websites with @font-face. If it is a pay for font there is a good chance you won’t be able to use it unless you buy a @font-face based license for it.

@font-face is CSS 2

Yes, the @font-face rule is actually from the 2nd CSS Specification, however not many browsers adopted it. Only IE, as far as I’m aware, used it and even then (and now) Internet Explorer only supports EOT files, which aren’t very common. If you really want an EOT file you can convert TTF to EOT using an online tool such as this one by Sebastian Kippe.

That’s it really. Custom font’s can be amazing when used correctly, and will hopefully negate the need for font embedding & canvas/VML based tools. However it would be nice if IE would start supporting TTF/OTF files like everyone else, I’d be even happier if they included WOFF too… Hmmm! Yet again Internet Explorer is letting the group down.

As usual if you have any questions, comments or something to add feel free to do so in the comments.


Author’s gravatar

This is a release for designers in order to be able to use what font they want. Obviously they could do that before in web design but there was a limit in using different fonts as text and the replacement of images as titles are giving the designer another option to make a webpage more accessible and seo friendly

Author’s gravatar author

@font-face is an answer to a prayer for most designers. Without @font-face you are limited to fonts that are available to all of your visitors, which isn’t many.

Author’s gravatar

great alternative(i’ll definitely try this), all this while im using cufon but the drawback is it can be a lag on a slow connection. Does this technique cause lag too?
psst: just taking a walk ya site while waiting for the WP take update on the plugin,

Author’s gravatar author

Well the only drawback is certain browsers can’t see it as listed above. It shouldn’t lag as long as the font file you use isn’t massive as @font-face is built into the browser meaning it is extremely quick compared to third party alternatives like flash etc.

Author’s gravatar

great then, will try this for my next project, but i think the license issues for the font is kind of a legal mess as some foundries charge separate (exorbitant) prices for fonts as opposed to just using them in a graphic.

Author’s gravatar

Copyright Issues – How we can buy a font for commercial use(eg – for commercial web projects/websites). I searched many sites, but didn’t find a good answer.

Author’s gravatar author

A good website for @font-face font is fontsquirrel.com for free and some paid ones.

Author’s gravatar

Thanks for sharing 😀
this is seems like a great alternative to the casual fonts that are pre-installed with everyone’s OS.

Author’s gravatar author

I think the only thing that lets it down is the inconsistency of the font rendering between browsers. Some browser show a nice clean anti-aliased render & others show horrible jagged edged render. If we could get consistent results from all the browsers I think everyone would start using @font-face a lot more. 🙂

Author’s gravatar

Hey, I had a question about adding your own font in CSS3, I understand the code but how do you source the font you want to use? For example, when you open font book, I don’t know where to reference the font I want to use.

Author’s gravatar author

Hey Dan,

I’m not totally familiar with Font Book, but I think that’s just a typographical reference program for iPad, isn’t it?

If you find one you like you would have to search popular font sites such as FontSquirrel.com, and fonts.com then check their licenses all online CSS3 based use since stupidly font authors have decided licensing for use on the internet is a whole ‘nother ball game.

Author’s gravatar

Its not working in IE 9 🙁

Author’s gravatar author

Hi Pratik,

I’ve just tested & everything seems fine in IE9. What exactly is the problem you are getting. Does the text show up? Is it in the wrong font?

Author’s gravatar

Hi Paul,
I have been using this, But its loading slow.
Its loading first the template layout after a movement its loading text with given font.
Any tip to get rid of this ?
Thanks 🙂

Author’s gravatar author


Normally that is associated with font replacement systems such as Cufon or Typekit, but it can sometimes occur with @font-face. It generally only happens when using font files are are quite large in size and combining it with a slow internet connection.

Also consider adding a local source, just in case the user has the font on their computer, and set cache headers for .eot, .ttf, .wof, .svg files on your server using htaccess (Apache), or conf (Nginx) files.

Author’s gravatar


I realize that this post is quite old now, but many people may not understand how to use the declared @font-face font from your example. Would you be able to show a clearer example?

Author’s gravatar author

Hi Diego,

Of course. I’m slowly, I say slowly because I have a huge amount of work at the moment, going through my old posts & re-writing them. Either to correctly show today’s newer code or to fix old broken examples.

P.S. I’m not normally in the habit of editing comments, but I was truly disgusted at how demeaning your comment was & decided it best not to inflict it on the rest of my visitors. Please understand that this tutorial was designed (at the time) to look at @font-face not how to use the font it declared. If you wanted me to add that, why not ask it like the above?

Older Comments
Newer Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more