Safari 3.1 introduces web fonts for all

Warning This article was written over six months ago, and may contain outdated information.

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!

16 comments on
“Safari 3.1 introduces web fonts for all”

  1. […] second is the more exciting to me, and I’ve already written a quick introduction (with example) on my own blog. In a nutshell, you can now embed fonts in your pages to display even to users who […]

  2. The problem is that most freefonts are shit.

    What about disallowing direct access to your fonts directory, but allowing your CSS to render the font (access the font directory). You’re not violating any rights then.

  3. So Apple copy? Or innovate? I know you are a true believer.

    Let us chant together. Ommmmmmmmmmmmmmmm…

  4. @ Wolf: It would be nice if font makers would license their fonts so we could do that, but until they do we have to use open licensed fonts.

    @ Blip: Microsoft have had this technology since IE4! However, theirs was only usable with a special embedded font type. So, Apple are first to market with an open type version. Again, making existing technologies easier. However (once more), this wasn’t their idea; it was suggested back in CSS2.

  5. Fantastic news. I just tried it and it appears to work beautifully. Thanks for the post.

  6. […] Apple udostępniło Safari dla systemów Windows. Były co prawda małe problemy z licencją, o czym wspominałem na blogu Pawła Wimmera, ale już jest OK. Warto się przekonać, jak Safari radzi sobie ze specyfikacją CSS3. Szczególnie interesująca jest obsługa font-face. […]

  7. […] more on @font-face and how it works, check out this @font-font explanation. Filed under browsers, css, design | Share This (Help break WordPress) Leave a […]

  8. […] typography, font-stretch and word-wrap are on their way, along with my favourite feature of all: @font-face! There will also be a lot of existing CSS […]

  9. […] CSS 3 kiválasztót, a text-shadow-t, a @media query-ket, a letölthető web betűkészleteket (@font-face), a font-stretch és word-wrap […]

  10. […] Safari 3.1 introduces web fonts for all […]

  11. Hey I think FF3.5.5 did render the font. Am I wrong?

    Camilo Martin [November 9th, 2009, 1:49 pm]

  12. Hi Camilo,

    Yes, Firefox now supports this too. Chrome, also.

  13. Quick reply and quite a nice and informative website! :)

    You say Chrome supports it, but being WebKit-based makes Chrome inherit all CSS3 virtues of Safari correct?

    By the way, abusing of you with two quick questions:

    Should we use CSS3 already or wait a couple of years or so until it’s more widespread? (and less people use that ugly IE, even IE8 is outdated!)

    And, is it ok to make a ugly version of a website for IE6? I mean, totally forget about trying to make it look nice, and be as simplistic as possible with design? (along with a unintrusive message asking users to upgrade to FF or Chrome)

    Thanks =)

    Camilo Martin [November 9th, 2009, 2:55 pm]

  14. Chrome more or less supports everything Safari does, but not quite; I don’t know all the differences, but there aren’t many of them.

    Should we use CSS3 already? Of course, as long as you make sure your content is still accessible and readable to people using older browsers. Things like rounded corners, shadows and web fonts can easily be used in a progressive way.

    That’s sort of related to your second question; I wouldn’t purposely make an ‘ugly’ website for IE6, but I think it’s acceptable to make a website that looks nicer in modern browsers. If it’s your own website, then the decision is yours to make; if it’s for a client, then you have to allow them the choice. I do think it’s acceptable to charge more to make a client website look identical even in IE6.

    Hope that helps.

  15. […] such a good idea that it was written into the CSS2 specifications by the W3C and is already being supported by Safari as well as betas for Firefox and Opera. However the EOT format is owned by […]

  16. […] such a good idea that it was written into the CSS2 specifications by the W3C and is already being supported by Safari as well as betas for Firefox and Opera. However the EOT format is owned by […]