Font-face in Chrome
Some days you can tell that @font-face embedding is still trying to find its feet in becoming a stable and viable solution. Chrome 4 and 5 beta currently have a bug that creates some weird behaviour.
In the following screenshot, you'll notice that everything looks a little off. Okay, that's an understatement.
Image courtesy of Pete Lambert
Every character is replaced by an A in a box. The problem is the local() declaration in the @font-face declaration. If you have the font installed on your machine and visit a page that uses the local() declaration then you'll see these boxes instead of your beautiful font.
The only solution I've seen so far is to remove the local() declaration.
Hat tip to Anton Peck for actually discovering the connection.
This is apparently fixed in the latest dev builds and will be in the next version of Chrome.
Conversation
Probably has something todo with this ticket: Issue 29729: Chrome sandbox blocks loading of fonts stored in nonstandard locations by font managers
I've been wondering about this. I'm seeing the same sort of problem & am using Font Explorer. Removing the local() declaration did help, but I've even seen seen Georgia show up with those repetitive "A" characters on a site using @font-face elsewhere (in a different class) during testing. It's a bummer.
Interesting. I haven't had any problems with Chrome 4 and local(). But then I don't have a font manager installed.
I was recently having the same issues on a little site I put together where I had several versions of a font installed and one of them was a "dingbat" version. That's all it would use for the local font so I went with the smiley technique
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley
Nice Web Type's write up is a pretty nice and thorough covering of @font-face
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
Forgot to wrap those links in anchors. If you want 'em linked up properly please feel free to do so :)
There's been an open Chrome Bug on this issue since January -- I found it on a site I was working on, tweeted about it and Paul Irish filed the bug:
http://code.google.com/p/chromium/issues/detail?id=33173
I've seen similar issues with sites that just use a font family declaration too... http://www.icdcouriers.co.uk.
So perhaps it's not simply a @font-face issue?
Chrome still have som bugs.
Yeah I'v encountered this problem on our site as well. Was figuring it was a chrome bug. So far it has only happened to people on Mac's using chrome, which I figured is a relatively small demographic but eventually had to turn off the @font-face and use a standard web-font
this is why lots of us are using bulletproof (smiley variant) instead - judging from the possible (ab)use cases I think this is a bug I'd prefer to see kept out of play by web designers - being able to load fonts from anywhere could make it very easy for script kiddies to pseudo-deface websites.
Works fine over here. Then again, I'm serving SVG fonts to webkit browsers.
Well it's great that you found this out Jonathan. But the reason for using local() is that so the user won't have to download the font if they have it locally anyway. It's used a lot for using some Win7/Vista fonts on your website. But you might do it for a font that possibly only "you" would have it installed :P
I sincerely hope they fix this bug :/ Otherwise it sucks to add more traffic to your bandwidth for just Chrome. I know though you can control the browser with javascript but it sucks anyway :)
Upon some further research, it looks like this has nothing to do with @font-face in particular and everything to do with trying to access a locally installed font that is enabled through a font management application like Font Explorer X.
That's exactly the issue; I've only ever encountered it in Chrome for Mac (not Windows, AFAIK) when a font manager is being used.
The only solution I've found is to move my FontExplorer library to a folder in ~/Library/Fonts/