Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horrible rendering of @font-face in Chrome

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:

  1. Tried applying text-shadow. It made it seem a little better, but still pretty awful.
  2. 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!

like image 677
omninonsense Avatar asked Jan 21 '12 02:01

omninonsense


2 Answers

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.

like image 72
maximo Avatar answered Oct 17 '22 12:10

maximo


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
like image 32
ThinkingStiff Avatar answered Oct 17 '22 14:10

ThinkingStiff