Apple have released Safari 3.1 for Windows and OS X (and Linux using Wine) today, and the feature that really stood out for me was the introduction of web fonts. Website makers have been bound to the same core fonts for years now, so suddenly having a huge palette to choose from is going to make an enormous difference!

Using them is pretty easy. First you have to declare the fonts using the @font-face rule — and, importantly, you have to declare each variant (weight, style, etc) individually by linking to the font file involved. You can’t just link to the directory and let the browser work out the variants. To see what I mean, take a look at this example (using Safari 3.1, of course!) and view the source to see the CSS involved.

The default font face uses the Roman form:

@font-face {
	font-family: Delicious;
	src: url('/tests/delicious/Delicious-Roman.otf');
}

And the bold weight is declared with the Bold form:

@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: url('/tests/delicious/Delicious-Bold.otf');
}

And so on. If you want to use a complete font family you’ll have to declare every variant of it. But then, you just call the fonts with the font-family declaration, as usual:

h1 { font-family: Delicious, serif; }

Which means it degrades gracefully. Nice!

Of course, now that we have this new tool in our arsenal (for the 5% of people who use Safari!) we must use it responsibly; only use fonts which have a free and open license. I’m using the fabulous Delicious in my example.

Please, please, please let the other browser makers follow suit shortly!