skip

Web font linking with @font-face

From OFLB

Jump to: navigation, search

Contents

In short

Most web browsers - Apple’s Safari, Mozilla Firefox, Opera, and Microsoft Internet Explorer - now ship 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.

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 only supports web fonts in its proprietary EOT format. In 2008 Microsoft submitted the format's specification to the Worldwide Web Consortium, hoping that the W3C would soon adopt it as a Web Standard. EOT has been supported in Internet Explorer since version 4, and 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 wish to feel confident that web technology won’t take their rights away. But EOT has some curious qualities.

In order to make web fonts work with Internet Explorer, you will need to convert your TTF fonts into EOT fonts. This will only work with TTF fonts, not OTF, so you may have ton convert your OTF into a TTF first. TTF2EOT is a simple conversion tool that works from the command line; hopefully someone will publish a GUI tool to make the job a easy drag-and-drop affair. If you have problems, please ask on our community mailing list for help.

How to use linked fonts

Here is our explanation, written with designers in mind. 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. 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.

There's more about your rights to use fonts on our License page.

If you want to host your fonts on your own server, you might find others linking to your fonts and running up your bandwidth bills. However, Firefox by default will only load fonts from the same server as the page being viewed, so this probably won't happen too much. To try to prevent having masses of drive-by traffic, read our Apache tutorial. 

  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 normal, condensed or expanded variant of the typeface.

Putting this together, then, we have: 

@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 stylesheets!

If you host font files on your own website, you may wish to minimise bandwidth costs by blocking font linking from other websites. You'll need to make sure that your web server is sending EOT and TTF files as binary files too, and doing this with Apache-based servers - which is the most common kind - is easy. Just add a file named ".htaccess" to the directory your fonts are in with a single line inside: 

 AddType application/octet-stream .ttf .eot

Also, so that your web fonts work in IE as well as other browsers, make sure that you include 2 sets of @font-face styles, one for the EOT files and one for the TTF files, and make sure the EOT set goes first.

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:

Alternatives

Retrieved from "http://openfontlibrary.org/wiki/Web_font_linking_with_%40font-face"