Font-Face Embedded Fonts Look Fuzzy in Windows 7 Browsers

Font-face embedded fonts look fuzzy in Windows 7 browsers

Try the http://www.fontsquirrel.com/fontface/generator generated markup.

@font-face font blurry effect in different browsers

It's a font rendering issue, if you open up the light version of Gotham Rounded, you can see that even the font browser shows it skimpy at the size of 12.

So I think you have two basic options:

1. Use the regular version of the font, which shows up fine in the browser too.
2. Use a cufon renderer.

Anyhow, the font is similarly deficient in both Firefox 16.0.2 and Chrome 22.0.1 for me, so I'd say it's a font issue. Actually in terms of rendering IE was the best for me - not so much about layout of course.

Good luck!

Horrible rendering of @font-face in Chrome

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:

Safari 5.1.2 (7534.52.7):

Firefox 9.0.1:

Opera 11.60 Build 1185:

Internet Explorer 9.0.8112 (under Parallels VM):

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

Making CSS3 @font-face font rendering play nice with ClearType on Windows

This is a big issue and is an official bug in Google Chrome since July 2012. In August 2013 this seems to be fixed in MOST cases. However there're still examples where fonts look edgy and pixelated.

Solution:

Give the element a decent text-stroke:

// try around, find the setting that fits your font-size
webkit-text-stroke: 0.6px; 

// alternative RGBa syntax, allows finer settings with alpha-transparency
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);

More info:

I've written a big blog article about this topic, including a lot of screenshots and 4 different solutions to fix the issue: Have a look here:

How to fix the ugly font rendering in Google Chrome

@font-face for custom fonts, fonts not smooth in Chrome

This is a known issue that Chrome devs are fixing:

http://code.google.com/p/chromium/issues/detail?id=137692

To work around until then first try:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

If this does not work for you, this work-around worked for me (above did not fix windows Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

it appears rearranging the @font-face CSS rule to allow svg's to appear 'first' fixes this problem.

example:

-before--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

-after--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face fonts showing blurred on Mac in Safari and Chrome

All browsers render fonts in a different way. Try -webkit-font-smoothing: antialiased; for Safari and see if it makes a difference. Also, try using relative length units.

Antialias font-face embedded text in Windows?

Looks like there's no Anti-aliasing present for embedded fonts in any version of Windows yet.

Firefox font-face rendering looks very different to e.g. Chrome

This seems to be a font issue since all opportunities that work for others do not affect the problem. Switching to a other font is the only solution in this moment.

---

Related Topics