Chrome and @font-face: It's here!
Today, Zeldman issued an ultimatum that we've all been feeling recently:
It's true, every major browser supports @font-face:
- Internet Explorer: since IE5
- Firefox: since FF3.5
- Safari: since Safari 3.2
- Opera: since Opera 10
But..
Google Chrome currently does not enable @font-face linking to ttf and otf.
It actually does support SVG fonts in a @font-face declaration. View this demo in Chrome or Chromium to see svg fonts in action. Divya has some great research around fonts and SVG if you're interested in more.
You can turn it on, at will
You can enable web fonts with an executable switch: −−enable-remote-fonts.
On Windows, you can tweak the shortcut path, like so.
With Chromium on OS X, you use Terminal to launch:
/Applications/Chromium.app/Contents/MacOS/Chromium --enable-remote-fonts
With proper Google Chrome on OS X, you need to escape the spaces:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-remote-fonts
With Chromium on Linux[1]:
chromium-browser --enable-plugins --enable-remote-fonts %U
Once you enable it, all @font-face stuff works just as you'd expect, including the bulletproof @font-face syntax [demo] and the Nice Web Type demos.
But we need web fonts working by default
Wait, so why is this wonderful feature disabled by default? Security review. Ian Fette, the program manager of Chrome, indicated that they need to explore how do webfonts in a "reasonably safe manner". So that's the holdup.
This ticket on the Chromium bug tracker tracks the feature being enabled by default.
Okay, so when do we get our toy? Soon, in fact!
Chrome is my default browser, so my patience on this issue ran dry recently. I emailed Takuya, an engineer at Google Japan, who is working on this and he said:
We are almost done. The code is under review internally within Google. I'm expecting to make it public no later than a week or so.
So I expect we'll be seeing @font-face support enabled by default in the Chrome dev builds soon. Based on their release schedule I think it'll be near the end of the year when we see it in Chrome stable. That's good news; let's hope we see it sooner.
2009.11.04: The Chromium team has released ots – an OpenType sanitizer library meant to clean any security concerns from a font file included via @font-face. They have also filed a bug upstream with WebKit to integrate this code at the Webkit level. Finally we see the fruit of their security review.
2009.11.18: Remote fonts are now enabled by default!!! This should only be in the dev builds for now. I'll update when it makes it to beta builds and eventually the stable. But right now it still looks like we'll see this in version 4 stable. (Nov 21: confirmed its in dev builds.. starting with version 4.0.249.4 [blog post], [rev 32300])
2009.12.09: @font-face support is now in the Chrome Beta of both Windows and Mac.
2010.01.25: @font-face support is now in the Windows Chrome Stable release! [release notes]
Oh, and Chrome Frame:
Currently @font-face doesn't work in Chrome Frame, and I know no way to enable it, as you can't really pass an executable switch to a Browser Helper Object.
So using Chrome Frame means you won't get any rich type with @font-face, which sucks. However it's still beta, and I believe it's using the dev branch of Chrome, so when @font-face support makes its way into the dev branch, I think we'll see it in Chrome Frame soon.
That is good news, indeed. The web has every right to be as font-rich as traditional media. Just gotta convince the foundries of that.
I know Safari 4 supports @font-face, but what's the status of iPhone Safari? Are we just using Cufón for mobile?
It often seems there's a disconnect when people plan for the future. You hear "The future of the web will have…" and "Mobile is where the web is going", but the two hardly ever line up.
@Russell Uresti
Russell, you're trying to sound like you know more than you really do.
With all due respect to Google, I don't believe @font-face is a security issue. That doesn't make any sense. Safari is a Webkit browser and it's had @font-face support for two years.
My bullshit alarm is going off.
I believe it's a legal issue.
Chrome Frame is a very bold back-door assault on MSFT. And Google knows perfectly well how MSFT feels about their investment in fonts and their opposition to linking to "raw" font files. If Chrome Frame were to circumvent that, it might just be the straw that breaks the camel's back.
I think they are gauging Microsoft's reaction before proceeding further.
Just my 2 cents.
@Richard Fink
I think you're reading a little too far into the 'security issue' comments. Remember, even full Chrome (which really has nothing to do with Microsoft) doesn't have @font-face enabled by default, not just Chrome Frame.
Why?! It exists typekit and I can't see their great fonts because of this on chromium! :-/
Am I using some kind of magic version of Chrome 3.0?
@font-face works just fine for me. Not sure if it's grabbing EOT or TTF, but then again IE doesn't support TTF as far as I know.
This is strange, but chrome 4.0.249.22 on Linux actually freezes at any typekit site that I can find, just stalls out and sits there. Not sure where I can register this as a bug, pointers welcome.
@Peter
I'd file it on their get satisfaction support site: http://getsatisfaction.com/typekit
So Chrome has web fonts now but the implementation is buggy. See http://soukie.net. Firefox and Safari render italics correctly but Chrome does not. Not sure if they have a bug tracking somewhere.
@Pavel Soukenik
It'd be awesome if you made a test case and filed a ticket for it:
http://code.google.com/p/chromium/issues/list
@Paul Irish, done. I have filed the bug #35739. (And also #35737 which is coming from webkit but nobody has reacted to my report in Bugzilla since September.)
Hi paul,
Google chrome supports @fontface for many english font types..
like http://www.fontsquirrel.com/fontfacedemo/Cloister-Black
but for language malayalam it doesn't seem to download ttf files :(.. look @ the site http://www.mathrubhumi.com/ it renders perfectly with firefox and IE with webfonts. but fails in Chrome. Do u have any solutions?
just wanna say that the first time you load a page with @font-face it doesn't work (otf)
f5 > start working
on chrome 5.0.375.23
Chrome supports WOFF fonts as of 5.0.396.0, which should be released to Beta Channel soon.
http://googlechromereleases.blogspot.com/2010/05/dev-channel-update.html
I'm finding that some very normal ttf fonts don't work either. For instance if you are using Reprise Stamp, you only get the first couple words.
This is latest chrome build as of 12/21/2010.
@Zach Baker
Actually Paul has pointed out that Chrome is rather particular – "secure" – with fonts. Seems that if the font tables have any corruption it bales out. I have tried a few fonts so far, none of which are working quite right in Chrome, but am hopeful to find something that looks decent and works in Chrome.
@Zach Baker
Actually Chrome support for this seems to really stink. I have tried a dozen different fonts now, none of which work correctly. Each and every one of them faults at certain character[s] in the font file.
It stinks to find some really nice looking stylistic font and not be able to use it, settling for another….10 times over…lame.
FF4 implements OTS as well so it probably fails there as well.
I don't know what fonts you're using but you should shoot them through the font squirrel generator first.. That might smooth out the font tables that are seemingly troublesome.