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.

Affected display in Chrome
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.

Published April 02, 2010
Categorized as HTML and CSS
Short URL: http://snook.ca/s/977

Conversation

15 Comments · RSS feed
David Petersen said on April 02, 2010
Trent Walton said on April 02, 2010

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.

Joshua Clanton said on April 02, 2010

Interesting. I haven't had any problems with Chrome 4 and local(). But then I don't have a font manager installed.

Trevor said on April 02, 2010

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/

Trevor said on April 02, 2010

Forgot to wrap those links in anchors. If you want 'em linked up properly please feel free to do so :)

Graham Ballantyne said on April 02, 2010

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

Nathan Pitman said on April 02, 2010

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?

Gunnar Andreassen said on April 02, 2010

Chrome still have som bugs.

Tiffany JEnkins said on April 02, 2010

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

John Hancock said on April 03, 2010

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.

Andy said on April 04, 2010

Works fine over here. Then again, I'm serving SVG fonts to webkit browsers.

Dena said on April 05, 2010

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 :)

Jonathan Snook said on April 06, 2010

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.

Peter Gasston said on April 07, 2010

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.

Michael Meyer said on April 08, 2010

The only solution I've found is to move my FontExplorer library to a folder in ~/Library/Fonts/

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.