The magic of webfonts

February 19, 2009 / A quick look at how webfonts work in browsers like Safari, Firefox and Opera.

Richard Rutter on Museo:

Museo is a clean yet unconventional semi-serif. With its sans-serif companion, both typefaces are lucid and versatile, great for original-looking headlines but also effective in medium-sized texts. Designer Jos Buivenga offers three out of the five Museo weights for free.

Web nerd confession: until now I hadn’t looked at how webfonts work, so I took advantage of Richard’s post to learn (I hope you don’t mind my digging into your page, Richard). In my browser, Safari, the second-level heading is rendered in Museo, which looks like this:

You can use Museo for @font-face linking with this license

Here is the markup:

<h2 class="museo">Museo is good for headings like this one</h2>

<p>Museo is a clean yet unconventional semi-serif. With its 
sans-serif companion, both typefaces are lucid and versatile, great 
for original-looking headlines but also effective in medium-sized 
texts. If you have a suitable browser (Safari, Firefox 3.1, Opera 
10) the prior heading should be have been rendered in Museo 500 
through the magic of webfonts.</p>

And here is the relevant CSS:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */

@font-face {
  font-family: 'Museo'; 
  src: url('/fonts/Museo500-Regular.otf') format('opentype');
}

h2.museo {
  font-family: Museo, Georgia, serif;
}

The magic is in the @font-face declaration. It looks straightforward—you declare a font-family, and then tell the browser where to find the source file, and what format it’s in. Included in this way, Museo is then treated as a supported font in capable browsers, so you just use it in your stylesheet as you would a typical web font. Neato.