Feature
Post

Category
Design


Five tips for using @font-face

As someone whose designs are definitely more plain than fancy, I’m usually happy to stick to font-family: Arial, Helvetica, Verdana, sans-serif; in my CSS. And the truth is that the first time I heard of font-face, I thought it referred to the free font website (which, by the way, is somewhere you can find fonts to use in your @font-face declarations).

Using @font-face is simple enough. In this example, I’ve uploaded the excellent Diavlo font to my server (in the same directory as my CSS, to keep things simple), and added the following to my stylesheet:

@font-face {
    font-family: "Diavlo Bold";
    src: url(Diavlo_BOLD_II_37.otf) format("opentype");
}
p.diavlo-bold { font-family: "Diavlo Bold", sans-serif; font-weight:bold;}

Now that’s in there, anytime I want a certain paragraph to display in the Diavlo Bold, all I need to do is:

<p class="diavlo-bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

and here’s the result:

font-face-html

You can see how this opens up a world of possibilities, and-especially when you’re a fontaholic like me- it really is easy to go nuts and @font-face every element on your page. But remember that with great power comes great responsibility, and keep these things in mind when using @font-face:

Check the font’s license.
You need to make sure that you’re allowed to use the font in this manner. A good place to start is this page of Fonts available for @font-face embedding, which lists fonts that specifically allow this (including the lovely Diavlo), those with an OpenFont license, and so on.

Remember that not all browsers support @font-face.
Right now, users on Firefox 3.1+, Safari 3.1+, Opera 10 and IE4+ will see your @font-face fonts. Yes, that’s a lot of users- but it’s still important to show some love to the users who can’t see your @font-face fonts, so make sure you include other nice fonts in your stack as well.

Keep loading times low.
Sure, you can put a hundred @font-face fonts on one page, but you really, really don’t want to. There are loading times for each font, so keep that in mind when you’re planning your style designs. This brings us to my next tip…

Look locally first.
If the user browsing your site already has the font on his or her computer, why bother finding it and loading it online? That’s why it’s always a good idea to have @font-face look for the font locally first. My example above, for instance, would become:

@font-face {
    font-family: "Diavlo Bold";
    src: local("Diavlo Bold"), url(Diavlo_BOLD_II_37.otf) format("opentype");
}

IE uses another format.

Not to knock IE, but of course it does. Whereas you’ll do fine with TrueType (ttf) and OpenType (otf) fonts in all the other browsers, IE only supports eot (Embedded OpenType) fonts. To be truly cross-browser compatible, then, we need to add another line to our example (see line marked “Hello, IE”):
@font-face {
    font-family: "Diavlo Bold";
    src: url(DiavloEOT.eot); /* Hello, IE */
    src: local("Diavlo Bold"), url(Diavlo_BOLD_II_37.otf) format("opentype");
}

Because my chosen font is in OpenType format, though, I need to convert it to eot before IE will see it. First, I use a free online font converter to turn my otf to a ttf- then I use Microsoft’s free WEFT tool to convert the ttf to eot.

Do you use @font-face?


  1. By Pacific Premium Funding posted on September 16, 2009 at 8:45 am
    Want an avatar? Get a gravatar! • You can link to this comment

    nice tips.. it really help..

  2. By Predero posted on September 24, 2009 at 2:55 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I can’t get a OET of the Diavlo OpenType file working, IE keeps on showing it wrong.
    Did you really make a valid OET from Diavlo?

  3. By Lorraine Nepomuceno posted on September 24, 2009 at 7:19 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi Predero- Yes, it’s working on IE… and I used WEFT to convert the font (from ttf)

    I’ve updated this post so that the paragraph below “IE uses a different format” uses the Diavlo @font-face, and it shows up fine on IE.

    I’d be happy to make the .eot files available for download here, but the thing with WEFT is that it will create .eot files that will work ONLY on the server you specify when you do the conversion. So if you want to use the same font on different sites, you’ll need to create .eots that will work on all those sites.

    Hope this helped.

  4. By John Daggett posted on September 25, 2009 at 1:43 am
    Want an avatar? Get a gravatar! • You can link to this comment

    There’s a small bug in your @font-face definition, you didn’t specify font-weight: bold in your @font-face rule. If you omit this the default is font-weight: normal which means that you’ll get additional synthetic bolding when you use font-weight: bold in style rules. In this case it might be better to omit the font-weight: bold in your style rule since that will affect the rendering in browsers that lack @font-face support.

  5. By rc posted on September 29, 2009 at 1:11 am
    Want an avatar? Get a gravatar! • You can link to this comment

    ok…got everything working. Thank you very much for this tutorial. Problem is, how do i avoid the warning box that asks to install a particular font?? any help would certainly be appreciated!

  6. By The Truth posted on November 12, 2009 at 11:11 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Screw IE, and screw IE users. End of story.

  7. By Chantal posted on November 29, 2009 at 9:27 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks a lot for posting the tutorial – has really cleared up some problems I was having.

  8. By sayamish posted on December 29, 2009 at 5:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    A superb tip……It worked well in my FF 3.5 …. but doesn’t work in IE7. I’ve converted my OTF file into EOT file format and used as mentioned in example above. Is it mandatory to use WEFT to convert the file into EOT format to make it work in IE ? For now, I’ve used Online Font Converter to convert the file format.

    Please let me know asap as I’m in dire need of the solution of this problem.

    Thanks in advance.

  9. TrackbackFive tips for using @font-face | DevloungeFive Tips for Using @font-face | Choose DailyWonderful Information on Web Fonts | cssOrigins.com | Design Blog, Tutorials, Tips, SEO Optimization, and Wordpress Publishing PlatformFive Fonts for @font-face | DevloungeEnhance Your WordPress Themes With Shortcodes | DevloungeEnhance Your WordPress Themes With Shortcodes | iDESIGN