@font-face: A Small Revolution

I just used the @font-face CSS rule to change the font of this website and use a nicer one: Open Sans.

@font-face is supported by all modern desktop browsers, including IE (since version 5.5!). The stock Android browser also supports it, but I have no idea about iOS or Windows Phone.

How does it work? It’s very simple: you define a custom font-family using a @font-face CSS rule:

@font-face {
  font-family: "My Font"; /* Name of the new font-family we are creating */
  src: url(http://full.url.of/the-font.odf);
  font-weight: 400; /* Default weight for "normal" text */
}

You can then use the custom font in any font-family rule:

p {
  font-family: "My Font", Verdana, Arial, sans-serif;
  font-size: 13px;
}

If the browser doesn’t support @font-face, it will fallback to the next font in the list, as usual.

The very nice thing is that Google decided to publish 500+ free-to-use fonts: enter the Web Fonts project. The online dashboard allows you to select the fonts you want to use in your website, and link to them with a simple <link rel="stylesheet" /> tag pointing to Google’s fast CDN and including all the selected fonts.

@font-face seems to have been around for a while, but I must have missed it. It’s actually a very brilliant yet simple solution to escape the boring typical Verdana, Arial, sans-serif font-family declarations we see on most websites.