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:
[code]@font-face {
font-family: “Diavlo Bold”;
src: url(Diavlo_BOLD_II_37.otf) format(“opentype”);
}[/code]
[code]p.diavlo-bold { font-family: “Diavlo Bold”, sans-serif; font-weight:bold;}[/code]
Now that’s in there, anytime I want a certain paragraph to display in the Diavlo Bold, all I need to do is:
[code]
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.
[/code]
and here’s the result:
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:
[code]@font-face {
font-family: “Diavlo Bold”;
src: local(“Diavlo Bold”), url(Diavlo_BOLD_II_37.otf) format(“opentype”);
}[/code]
IE uses another format.
[code]@font-face {
font-family: “Diavlo Bold”;
src: url(DiavloEOT.eot); /* Hello, IE */
src: local(“Diavlo Bold”), url(Diavlo_BOLD_II_37.otf) format(“opentype”);
}[/code]
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?
