Implementing @font-face

Web standards take time to be finalized, and then implemented by the various web browsers. In some cases, a lot of time. The list of not-yet-widely-supported web standards is a long one. However, that list got shortened by one recently. I am speaking of the widespread ability to embed fonts on webpages. More specifically, the @font-face stylesheet rule.

In the past, to use “nice” fonts on the web, they either needed to be embedded in images or brought in using embedding techniques such as sIFR, Flir, or Cuf√≥n. The former is tedious and repetitive, although could be automated server-side, but not great for using images in place of real text. The latter adds dependencies on Flash and/or JavaScript, which isn’t ideal either. Headings should be real text for the benefit of usability and SEO. @font-face avoids these problems by having the browser download and display the custom font.

Paul Irish published on his blog a snippet of CSS that can be used to implement @font-face in a cross-browser fashion. The post shows multiple code samples, each with varying levels of browser support, explained along the way, and winds up with the final sample. The full details are on Paul’s blog, but the sample “bulletproof” snippet appears as follows:

[code lang=”css”]@font-face {
font-family: ‘Graublau Web';
src: url(‘GraublauWeb.eot’);
src: local(‘Graublau Web Regular’), local(‘Graublau Web’), url(‘GraublauWeb.otf’) format(‘opentype’);

That snippet essentially “imports” the font into the stylesheet. At this point, the font, referred to as indicated in the font-family rule, may be used within the rest of the stylesheet. An example of such use follows:

[code lang=”css”]h1, h2, h3, h4, h5, h6 {
font-family: ‘Graublau Web’, Times, serif;

It is possible to use multiple font faces, and different variations of each, such as bold and italic. The variations may all be in one file, or each variation may have its own file. One would want to avoid using more than a couple of such fonts though, as they each represent an extra download for the browser.

Speaking of browsers, there is a catch to this news. As tends to be the case in supporting latest-and-greatest CSS advances, Internet Explorer is the odd one out. IE does not support font embedding using OpenType (OTF) or TrueType (TTF) fonts. Instead, it supports Embedded OpenType (EOT) fonts. EOT is a closed format, although Microsoft have actually submitted it to the W3C as a proposal for a standard. But it is only supported by Internet Explorer. Curiously, IE has actually supported font embedding for at least a few versions, but this was apparently not widely known until the recent advancements in other browsers.

Recently-released browsers that support this technique include Opera 10, Safari 4, Firefox 3.5, and Chrome 3. Between those and IE, they represent the vast majority of web browsers in use.

Fellow Canadian Jonathan Snook has written up the process (including a screencast) of creating an EOT file from a TTF, and refers to the aforementioned post on how to make use of the fonts in a stylesheet. Going from OTF to EOT is a multi-step process (although starting with a TTF is slightly less work), and it took me a few tries to get it right. Full details are on Jonathan’s blog, but the steps are abbreviated here:

  1. If starting file is TTF, skip to step 3.
  2. If starting file is OTF, it needs to be converted to TTF.
  3. With original, or converted, TTF in hand, can generate the EOT.
  4. Add font files to site, amend style sheet.

There is some welcome assistance in the form of the Font Squirrel website. The site has a listing of fonts that are free and are licensed for use on the web. As an additional bonus, the site makes available @font-face kits which contain the appropriate files (OTF or TTF, plus EOT) for each font listed. The package also includes instructions for implementation.

I’ve implemented this technique on my site, to test that it works. And it does work. I’ve tested in all the current browsers, and they all display the custom font – Graublau Web, as shown in the CSS example earlier. I will probably change the font, once I find one that best suits the theme of the site. But for now, it works, and I won’t have to change much in the CSS when I am ready to change the font. The image below shows side-by-side shots of the homepage, with pre-font-face on the left, and post-font-face on the right.

before_after_fontface_lgThis site’s homepage, before @font-face, and after.

In the end, despite the extra work to support Internet Explorer, web developers have a new tool available to them. There is a way to embed non-standard fonts on a website, and have them displayed consistently across the current major browsers. Hopefully, this is a sign that browsers are starting to converge on their support for standard CSS, and that the CSS spec will continue to evolve and provide additional capabilities to make browsing the web a richer experience. The primary issue remains that of using fonts that are licensed for web embedding.