Web font linking with @font-face
From OFLB
Contents |
In short
Apple’s Safari browser now ships with support for linked fonts. These are fonts that are stored on a web server and downloaded by the browser along with the HTML, CSS and images that make up the page. Over the next few months Firefox and Opera will follow where Apple has led. Be ready for this when you create web pages. Explore the Open Font Library’s collection of typefaces, which are all licensed permissively. Linking to the fonts on this site explodes your typeface repertoire. And far from cutting into the profits of type designers, these typefaces enable everyone to get closer to the typography they dream of – perhaps in scripts that they have never before been able to use online.
Why can’t I just specify a font I like?
You can. Especially if you like Times. But when you name a specific font, the browser will ask the computer it’s running on for that font. So when you look at the page with a font you have installed, you see it. Other people just see a regular fallback font – it could be anything, especially if you don’t give any indication of the type of font you want to use. Often, the fallback will be Times. A lot of computers have that font installed.
Embedded OpenType (EOT)
Microsoft donated its proprietary EOT specification to the Worldwide Web consortium earlier this year. The W3C may soon adopt it as a recommendation. EOT (which Windows Internet Explorer since version 4 supports) is a smart system, intended in part to give type foundries (professional font makers, in other words) confidence to unleash their huge reserve of type to the highest bidders. Like other publishers, they need to feel confident that technology won’t take their rights away. But EOT has some curious qualities.
How to use linked fonts
Here is our explanation, written for designers. Mozilla have also published a great article on this subject, "beautiful fonts with @font-face".
@font-face rules let you specify fonts you want to use in a web page. The fonts can be hosted on any server that is accessible to the web. The first thing to do is make a separate stylesheet file for your linked font stanzas. It’ll keep them nicely segregated from the regular CSS rules you are using to control the appearance of your site. Done that? OK, next. You will need a stanza for each member of the typeface family that you want to use. That’s a one-to-one match between regular .otf or .ttf files and @font-face rules, so it is easy to remember. There are five selectors you need to specify to get web fonts working: font-family, src, font-weight, font-style, and font-stretch. Let’s walk through these.
@font-face {
We’re declaring a rule about font linking
font-family: "Puritan";
This is a name you use when you want to refer to the font in other CSS rules. For convenience you can use the name you see when using the font in a desktop app’s font menu. If you like you can be obscurantist and give it a name you have made up. But let’s play nicely and use the name the designer chose.
src: local('Puritan'), url(http://openfontlibrary.org/people/benweiner/3/Puritan_Regular.otf) format("opentype");
The location of the font file. There's more about your rights to use fonts here. And if you want to host your fonts on your own server without generating masses of drive-by traffic, that’s OK too: read our Apache tutorial for inspiration. Specify the name of the font as it appears in font selection lists on your computer as a ‘local’ version to load from the user’s own machine, if it’s present, to avoid making a network request.
font-weight: 400;
Tell the rendering engine that it should use this font file to represent the regular text weight. We specify it using the PANOSE system. Browsers follow the W3C candidate recommendation and the PANOSE number to decide what to do when they need a font that’s specified as regular, bold, and so on. You can only use values of 100, 200, 300, 400, 500, 600, 800 and 900.
font-style: italic;
Is it sloped (italic) or not (normal)? Note for typographers: you can use oblique instead of italic if you’re referring to a sloped roman. See, coders are perfectionists too.
font-variant: normal;
Identify a small-caps font with the keyword'small-caps'.
font-stretch: normal;
}
Tell the renderer that the font is a condensed or expanded variant of the typeface. Putting this together
@font-face {
font-family: "Puritan";
src: local('Puritan'), url(http://openfontlibrary.org/people/benweiner/Puritan_Regular.otf) format("opentype");
font-weight: 400;
font-style: italic;
font-variant: normal;
font-stretch: normal;
}
Every typeface page on this site includes a “Link” section that generates a set of @font-face rules from any OpenType or TrueType font files included with the typeface. Cut and paste into your stylesheet!
If you host font files on your own website, you may wish to minimise bandwidth costs by blocking font linking from other websites.
External Links
A List Apart introduced this topic in depth back in August 2007. Oli posted some tips to the www-style list in May 2009.
John Daggett published a great article on this subject in June 2009, "beautiful fonts with @font-face".
Download browsers that support web fonts: