Horrible rendering of @font-face in Chrome

Question

Hi,

I am wondering if there's a way to somehow force Chrome (Safari and Opera included) to render the fonts that are loaded by @font-face better? I'm not sure if it's only these two fonts, but I sincerely doubt it.

Screenshot

The top snapshot is the rendering of the text in Firefox 8. The one below is from Chrome(16). Now, this wouldn't bother me as much if it was rendering awfully in IE, too--but in IE it renders quite wonderfully (similary to FF).

So, I did try a few things:

Tried applying text-shadow. It made it seem a little better, but still pretty awful.
I tried using -webkit-font-smoothing: antialiased, but that didn't seem to have any effect at all.

Now, I could stop being an annoying perfectionist and simply use an image for the logo (since the smaller text doesn't render that badly, but still bad, mind you) and be done with it.

I don't really like that solution, but I will accept it if there is no other.

Thanks!

Can you post some code or a demo link so we can play with it? — ThinkingStiff, Jan 21 '12 at 02:26
@neworld it did cross my mind, but I'd rather not have the text replaced by images (ones that can't be copied as text, at that). — omninonsense, Jan 21 '12 at 02:36
I'm getting opposite results. Chrome 18 dev and Safari 5.1.2 looks great and FF 9.0.1 is all dark. — ThinkingStiff, Jan 21 '12 at 02:38

score 4 · Answer 1 · edited May 23 '17 at 12:10

4

https://stackoverflow.com/a/9041280/1112665

If your code is from font squirrel it may be as simple as just rearranging the order of some of your css.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 02 '12 at 22:09

maximo

1,101
9
16

Oh, interesting. I will try it out. I fixed the problem by ditching font-face (since the original layout changed, too). Thanks! – omninonsense Mar 02 '12 at 22:47

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

I'm seeing almost the exact opposite on OS X. Chrome, Safari are fine and Firefox isn't displaying right.

Chrome 18.0.1003.1 dev:

enter image description here

Safari 5.1.2 (7534.52.7):

enter image description here

Firefox 9.0.1:

enter image description here

Opera 11.60 Build 1185:

enter image description here

Internet Explorer 9.0.8112 (under Parallels VM):

enter image description here

It looks like Windows 7 @font-face problems are quite common, and there are a lot of inconsistencies in general:

@Font-Face Windows Woes (flynsarmy.com - 2010/05/29)
@font-face gotchas (http://paulirish.com/ - 2010/05/05 )
Font-face embedded fonts look fuzzy in Windows 7 browsers
@font-face rendering in Windows 7

edited May 23 '17 at 10:30

Community

1
1

answered Jan 21 '12 at 02:42

ThinkingStiff

64,767
30
146
239

What sorcery is this?! What? Oh my God. I'm cursed. D: How did you do that!? Well, I'm on Windows 7 (will switch to Chrome Dev channel to see if I'll get the same results). – omninonsense Jan 21 '12 at 02:43
@withadot. I'm on OS X. Also, the FF one looks good one sizes above 100px. – ThinkingStiff Jan 21 '12 at 02:48
on my winxp machine with chrome 16 it renders like it does on the image of chrome 18 in this answer – Travis J Jan 21 '12 at 03:11
Oh, yeah. I installed Chrome 18-dev; no good. Opera renders very closely like Chrome does. – omninonsense Jan 21 '12 at 03:20
@withadot. Looks like with Travis J's result that it may be Windows 7 specific. – ThinkingStiff Jan 21 '12 at 03:39
Ah well, I don't think it'll get any further than this. Thank you for all your help! :D xo – omninonsense Jan 21 '12 at 10:56

score 0 · Answer 3 · answered Jul 01 '13 at 15:52

You can also ensure the SVG format is being used primarily. The upshot to this is the font will render perfectly in Opera/Chrome, the down side is that I have found line-height issues arise.

Use a chrome specific media query and replace the font with the SVG version exclusively.

Horrible rendering of @font-face in Chrome

3 Answers3