@font-face

A big handicap graphic design for the web had to put up with until recently was being limited to a small number of ‘web-safe‘ fonts. These web-safe fonts were the lucky few considered so widespread that the chances of having a visitor that didn’t have them installed were negligible.

The fact that something as primary as the ability to download online fonts was lacking in HTML / CSS for so long made it necessary for third party technology-based hacks (as for instance sIFR) to fill up the gap.

Luckily the CSS @font-face specification (originally proposed for CSS 2) will end the silliness for good as it gives the author control over the font used to display his content.

Browsers

The @font-face specification has been implemented in Internet Explorer since version 4 in which implementation relied on the proprietary Embedded Open Type (.eot) format. After Safari 3.1 introduced support for TrueType (.ttf) or OpenType (.otf) fonts and soon the other browsers followed suit.

Syntax

To properly use web fonts each format of the font must be declared using the @font-face rule. The syntax for this currently looks quite complex when applied with all supporting browsers in mind. This is due to browser idiosyncrasies, but in fact all the @font-face statement does is import a font file for use on the current page.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Implementation

If you want to start using fancy fonts right away – Fontsquirrel.com offers a very simple and complete solution to start using this technology quickly. It allows you to download the different font formats and css declarations all together needed in a nifty font specific ‘kit’.

A ‘bulletproof manner’ for implementing the @font-face specification was posted on Paul Irish’s blog a while ago.

Also have a look at this post – about using @font-face to display icons:
http://somerandomdude.com/articles/design-technology/font-embedding-icons/

Tags: CSS3, Flash, font