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 Win­dows and OS X (and Lin­ux using Wine) today, and the fea­ture that real­ly stood out for me was the intro­duc­tion of web fonts. Web­site mak­ers have been bound to the same core fonts for years now, so sud­den­ly hav­ing a huge palette to choose from is going to make an enor­mous difference!

Using them is pret¬≠ty easy. First you have to declare the fonts using the @font-face rule ‚ÄĒ and, impor¬≠tant¬≠ly, you have to declare each vari¬≠ant (weight, style, etc) indi¬≠vid¬≠u¬≠al¬≠ly by link¬≠ing to the font file involved. You can‚Äôt just link to the direc¬≠to¬≠ry and let the brows¬≠er work out the vari¬≠ants. To see what I mean, take a look at this exam¬≠ple (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 com¬≠plete font fam¬≠i¬≠ly you‚Äôll have to declare every vari¬≠ant of it. But then, you just call the fonts with the font-fam¬≠i¬≠ly dec¬≠la¬≠ra¬≠tion, as usual:

h1 { font-family: Delicious, serif; }

Which means it degrades grace¬≠ful¬≠ly. Nice!

Of course, now that we have this new tool in our arse­nal (for the 5% of peo­ple who use Safari!) we must use it respon­si­bly; only use fonts which have a free and open license. I’m using the fab­u­lous Deli­cious in my example.

Please, please, please let the oth­er brows­er mak­ers fol­low suit shortly!

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

  1. [‚Ķ] sec¬≠ond is the more excit¬≠ing to me, and I‚Äôve already writ¬≠ten a quick intro¬≠duc¬≠tion (with exam¬≠ple) on my own blog. In a nut¬≠shell, you can now embed fonts in your pages to dis¬≠play even to users who [‚Ķ]

  2. The prob¬≠lem is that most free¬≠fonts are shit.

    What about dis­al­low­ing direct access to your fonts direc­to­ry, but allow­ing your CSS to ren­der the font (access the font direc­to­ry). You’re not vio­lat­ing any rights then.

  3. So Apple copy? Or inno­vate? I know you are a true believer.

    Let us chant togeth­er. Ommmmmmmmmmmmmmmm…

  4. @ Wolf: It would be nice if font mak­ers 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 tech¬≠nol¬≠o¬≠gy since IE4! How¬≠ev¬≠er, theirs was only usable with a spe¬≠cial embed¬≠ded font type. So, Apple are first to mar¬≠ket with an open type ver¬≠sion. Again, mak¬≠ing exist¬≠ing tech¬≠nolo¬≠gies eas¬≠i¬≠er. How¬≠ev¬≠er (once more), this was¬≠n‚Äôt their idea; it was sug¬≠gest¬≠ed back in CSS2.

  5. Fan¬≠tas¬≠tic news. I just tried it and it appears to work beau¬≠ti¬≠ful¬≠ly. Thanks for the post.

  6. [‚Ķ] Apple udostńôp¬≠niŇāo Safari dla sys¬≠tem√≥w Win¬≠dows. ByŇāy co praw¬≠da maŇāe prob¬≠le¬≠my z licencjńÖ, o czym wspom¬≠i¬≠naŇāem na blogu PawŇāa Wim¬≠mera, ale juŇľ jest OK. Warto sińô przekon¬≠ańá, jak Safari radzi sobie ze specy¬≠fikacjńÖ CSS3. Szczeg√≥l¬≠nie intere¬≠su¬≠jńÖ¬≠ca jest obsŇāu¬≠ga font-face. [‚Ķ]

  7. [‚Ķ] more on @font-face and how it works, check out this @font-font expla¬≠na¬≠tion. Filed under browsers, css, design | Share This (Help break Word¬≠Press) Leave a [‚Ķ]

  8. [‚Ķ] typog¬≠ra¬≠phy, font-stretch and word-wrap are on their way, along with my favourite fea¬≠ture of all: @font-face! There will also be a lot of exist¬≠ing CSS [‚Ķ]

  9. [‚Ķ] CSS 3 kiv√°laszt√≥t, a text-shad¬≠ow‚ÄĎt, a @media query-ket, a let√∂l¬≠thetŇĎ web betŇĪk√©s¬≠zleteket (@font-face), a font-stretch √©s word-wrap [‚Ķ]

  10. [‚Ķ] Safari 3.1 intro¬≠duces web fonts for all [‚Ķ]

  11. Hey I think FF3.5.5 did ren¬≠der the font. Am I wrong?

    Camilo Martin [November 9th, 2009, 13:49]

  12. Hi Cami­lo,

    Yes, Fire­fox now sup­ports this too. Chrome, also.

  13. Quick reply and quite a nice and infor¬≠ma¬≠tive website! :)

    You say Chrome sup­ports it, but being WebKit-based makes Chrome inher­it all CSS3 virtues of Safari correct?

    By the way, abus­ing of you with two quick questions:

    Should we use CSS3 already or wait a cou­ple of years or so until it’s more wide­spread? (and less peo­ple use that ugly IE, even IE8 is outdated!)

    And, is it ok to make a ugly ver­sion of a web­site for IE6? I mean, total­ly for­get about try­ing to make it look nice, and be as sim­plis­tic as pos­si­ble with design? (along with a unin­tru­sive mes­sage ask­ing users to upgrade to FF or Chrome)

    Thanks =)

    Camilo Martin [November 9th, 2009, 14:55]

  14. Chrome more or less sup¬≠ports every¬≠thing Safari does, but not quite; I don‚Äôt know all the dif¬≠fer¬≠ences, but there aren‚Äôt many of them.

    Should we use CSS3 already? Of course, as long as you make sure your con¬≠tent is still acces¬≠si¬≠ble and read¬≠able to peo¬≠ple using old¬≠er browsers. Things like round¬≠ed cor¬≠ners, shad¬≠ows and web fonts can eas¬≠i¬≠ly be used in a pro¬≠gres¬≠sive way.

    That‚Äôs sort of relat¬≠ed to your sec¬≠ond ques¬≠tion; I would¬≠n‚Äôt pur¬≠pose¬≠ly make an ‚Äėugly‚Äô web¬≠site for IE6, but I think it‚Äôs accept¬≠able to make a web¬≠site that looks nicer in mod¬≠ern browsers. If it‚Äôs your own web¬≠site, then the deci¬≠sion is yours to make; if it‚Äôs for a client, then you have to allow them the choice. I do think it‚Äôs accept¬≠able to charge more to make a client web¬≠site look iden¬≠ti¬≠cal even in IE6.

    Hope that helps.

  15. [‚Ķ] such a good idea that it was writ¬≠ten into the CSS2 spec¬≠i¬≠fi¬≠ca¬≠tions by the W3C and is already being sup¬≠port¬≠ed by Safari as well as betas for Fire¬≠fox and Opera. How¬≠ev¬≠er the EOT for¬≠mat is owned by [‚Ķ]

  16. [‚Ķ] such a good idea that it was writ¬≠ten into the CSS2 spec¬≠i¬≠fi¬≠ca¬≠tions by the W3C and is already being sup¬≠port¬≠ed by Safari as well as betas for Fire¬≠fox and Opera. How¬≠ev¬≠er the EOT for¬≠mat is owned by [‚Ķ]