Webreakstuff's blog on design, development and strategy. Click here to subscribe.

Webkit gets @font-face

Fred Oliveira on October 5, 2007

Webkit

A post for the web-designers out there. Rejoice, for the blogosphere bears good news today - Webkit (the engine behind Safari) joins Opera in supporting @font-face rules in nightly builds. This means it includes the necessary functionality to link to downloadable fonts from CSS - or to put it short: typographic freedom (within licensing limits, naturally) at last.

One of the most frustrating things about designing for the web is how limited you are in terms of which fonts you can use. Today you only get a handful of safe fonts on all platforms, but that will change with @font-face finally coming into browsers near you. It will allow the designer to specify external fonts that the browser downloads and uses to render text in the page.

In theory, this gives you limitless possibilities, as long as you have the license to redistribute the fonts you want to use in your designs. The fact that the majority of fonts (and arguably the large majority of good fonts) can not be distributed freely will be a tough problem to solve, but this is undoubtedly a step in the right direction.

@font-face {
    font-family: "MyFont";
    src: url(http://server.com/font.ttf) format("truetype");
}

h1 { font-family: "MyFont", sans-serif }

Want to know more about how to use @font-face in the future? Refer to this article over at the always awesome A List Apart. There’s also a couple of interesting opinions and discussions over at Simplebits, Hicksdesign and Typographica.


Comments on this post

Marcelo Calbucci

I agree this is fantastic news. I can’t wait for it to be useful.

The problem lies in the fact that it’ll be a couple of years (maybe less) for all the major browsers to support it on all platforms. Then it will be a couple more years until the browsers that support ‘@font-face’ to be used by more than 50% of the population. Then it will be a couple more years for the vast majority of users (> 80%) to be using the browsers with that support and become a reality for mainstream web developers.

Gee… Things move so slowly on the web.

Joao Moreno

That’s nice, and it’s about damn time.

I’m glad designers are being heard more and more, concerning Web issues. All this amazing technology and only now have we managed to use a browser with this feature? And as Marcelo indicated, my “now” is a bit relative.

I have to say this: @font-face is included in the Web Fonts modules of the CSS 3 draft. (I’m such a standards sucker ^^)

Joaquim Rendeiro

This sounds like the announcement that “IE 4 now supports font embedding”, except that now we don’t have to convert the fonts to weird formats :)
Taking the “couple of years” approach, it will just take a couple of years for FF guys to add font embedding support (ttf et al) (and maybee in the meantime, the colective mind reverse engineers MS’ proprietary font embedding format, eot). By then, someone will come up with a dirty CSS definition that degrades for IE and voilá: font embedding for everyone in a couple of years :)

  Webkit understøtter @font-face by cssdesign.dk

[...] Webkit gets @font-face Yay - css, nu med mulighed for at benytte alle skrifttyper [...]

Something to say?