Webkit and @font face
3 Feb, 2008
Views: 556
I ran into a rendering bug with Webkit 3 nightly build, a couple of weeks ago, while toying with some ideas that have been incorporated in this version of frdk.com — a “bug” which affected Intel Macs, but not G4 PPC Macs. Webkit 3 comes with support for a number of CSS3 things, including @font-face, which basically allows you to store any Truetype or Opentype font file on a web server which you can then use on your web pages with a simple style declaration in your HTML document or CSS style sheet.
<style type="text/css">@font-face {font-family: "Some Family"; src: url(http://yourdomain.con/fonts/some_family.otf) format("opentype");}
h1 {font-family:"Some Family",sans-serif;}</style>
I’m using it now on this here site – the h2 headlines on it are set in Trade Gothic Light which you can see if you’re using a browser that supports the use of @font-face (limited, I think, to Firefox 3 and Webkit 3).
Here’s how it looked before the rendering bug was fixed:
1
And here’s how it’s supposed to look, which it does after the bugfix:
2
Webkit 3 Intel Problem
Up until yesterday, February 2, the support of @font-face appeared broken on Intel Macs running Webkit builds prior to 29933, which I in an unguarded moment reported to Dave Hyatt. Didn’t think much would come of it, since my report wasn’t all that coherent or backed by hard data. But lo’ — in build 29933, Webkit’s @font-face support is fully functional on Intel Macs.
Nice!
1) The image shows how Webkit prior to build 29933 rendered a Truetype font on an Intel iMac. E.g: not at all, not even using defined fallback fonts instead.
2) This image shows how Webkit renders the same Truetype font after the fix. Note that this only applies to nightly builds of Webkit, not the official Safari version.
Tags: Webkit Intel Mac font face ▣ Add to: 
Fred K said (13 Feb, 2008):
/* UPDATE */
Firefox 3 does not support @font-face, at least not the build I'm testing.
Also, Webkit 3 is a little bit iffy ... each @font-face declaration needs to be separate, and for best result embed them in the HTML document. Using an external stylesheet and importing it (via @import) produces haphazard results, i.e sometimes the proper font is used, sometimes the nearest fallback font is used, completely without logic as far as I can tell.
So, it’s anice feature but don’t use it for production sites just yet... ;)
