Go Beyond Web-Safe Fonts with CSS3

  • Tom Kenny

For many years now, web designers have been restricted to using a small number of fonts that are considered ‘web-safe’ due to the dependance of being available on every computer. CSS3 is changing that by introducing a method of using any font within reason. We’ll get to that later.

Very Simple

The good news is that it is a very simple method, unlike efforts such as sIFR which require both javascript and flash for implementation.

Below is the code implemented right here on Inspect Element:

@font-face {

     font-family: Anivers;

     src: url(../fonts/Anivers.otf) format("opentype");

}

This basically defines a font It’s important to note that you can create whatever name for the font-family property you want as this is what you’ll be referencing to further on in your CSS. In this case I’ve called it the same as the font name. Genius right? It’s best to call it by the name of the font for consistency.

Now you can reference the font-family anywhere in your CSS as you have been doing with the regular web-safe fonts. Here is an example of using this font on an H2 tag:

h2 { font-family: 'Anivers', 'Arial'; font-size: 20px; }

Interestingly the @font-face property can be used anywhere in a CSS file, even after the elements you style with it.

Browser Compatibility

Currently only Firefox 3.5 and webkit browsers such as Safari and Google Chrome will render. Of course, older browsers such as IE6 and IE7 will not support it and with IE8’s distinct lack of CSS3 features, that doesn’t support it either. Defining a second font for browsers that lack support is highly recommended. As you can see in the example above, Arial has been setup as the for those browsers to fall back on.

Examples of @font-face in the Wild

potential

The Potential of Web Typography shows what a site can look like using @font-face for all text. Although this site’s creators claim that Firefox 3.5 displays the site as intended, I noticed that it doesn’t render the ‘x’ in Firefox at the top of the page. It renders perfectly in Safari however.

taptaptap

tap tap tap elegantly uses Fontin for titles.

Elliot Jay Stocks’ makes very good use of Graublau across his portfolio site.

Usage

Of course, all of this means that you can’t just use any font you want, even fonts you’ve purchased. This method makes it very easy for any visitor to extract the font in use and use it themselves. Basically stealing. Font creators work extremely hard so stick to using free fonts or fonts specifically licensed for @font-face usage.