Jagged And Choppy Google Webfonts In Chrome And Firefox On Windows

July 30, 2023 Post a Comment

I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better). Example can be found here: http://jsfid

Solution 1:

I've found that downloading the fonts I want to use, converting them to .svg using font squirrel (web application, google it) and hosting them on the web server seems to solve the issue. In the code, place the .svg font link above the others and Chrome will/should grab that first.

Solution 2:

These are the defaults for font smoothing (with google fonts too) I use that seem to do the trick. Hope this helps

*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}

Solution 3:

Known issue for years (first mentions from 2010). Developers promissed to introduce fix maybe this year. Problem (as I understand) is with enabling directwrite (for for font smoothing) within sandbox.

More here http://www.reddit.com/r/web_design/comments/23cuif/yet_another_chrome_webfont_aliasing_post_why_is/cgvs5j2

or here: https://code.google.com/p/chromium/issues/detail?id=331115

Edit: Using SVG font can help for someone, but SVG is too blured for me (compared with antialiased woff in Firefox).

Solution 4:

Specifying the font-weight to 400 fixed the issue completely for me. I think it is intially 700, at least for h2 and h1...

h2 {
font-family: 'Lobster', cursive;
font-size: 23px;
color:#fff;
font-weight: 400;
}

Firefox still wins, but it is not jagged anymore

Solution 5:

Just go reset all flags in Chrome. Type in chrome://flags in the URL address bar and click on the Reset All Flags to default button. That should be on the right hand side of the settings page. It worked for me. If it does not for you, you may try enabling the Aero visual settings of your computer (only if disabled) then reset the flags. If resolved, you may then switch off the aero visuals.

To access the aero visual settings in Win7, go to My Computer properties > Advanced system settings > System Properties > Advanced tab > Performance (Settings). From there, toggle the current setting back to 'Adjust for best appearance (it should check all boxes under it). After resetting all flags and the fonts are back to normal, you may choose to toggle it back to Adjust for best performance. That essentially unchecks all visual options.

Thanks,

Dong

Code Html5