Google webfonts render choppy in Chrome on Windows
Solution 1
Update August 2014
Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.
Problem
The issue is created because chrome actually cannot render TrueType fonts with correct anti-aliasing. However, chrome still renders SVG files well. If you move the call for your svg file up in your syntax above the woff, chrome will download the svg and use it instead of the woff file. Some tricks like you propose work well, but only on certain font sizes.
But this bug is very well known to the Chrome developer team, and has been in fixing since July 2012. See the official bug report thread here: https://code.google.com/p/chromium/issues/detail?id=137692
Update Oct 2013 (Thanks to @Catch22)
Apparently some websites may experience intermittent spacing issues when rendering the svg. So there is a better way to skin it. If you call the svg with a media query specific to Chrome, the spacing issues disappear:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'MyWebFont';
src: url('webfont.svg#svgFontName') format('svg');
}
}
First approach solution:
The Fontspring bulletproof syntax modified to serve the svg first:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
}
Further reading:
- CSS properties that affect type rendering
- Smoother Web Font Rendering in Chrome for Windows
- How to Bulletproof @font-face Web Fonts
Solution 2
-webkit-text-stroke: 0.5px;
use it only on large text, since it will affect your page performance.
Solution 3
A fix has been suggested here by calling the .svg file first, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Solution 4
I've tried a number of solutions and finally came up with one that works with newer versions of Chrome which don't fall for changing the order of the files:
Essentially, I moved the TTF file into a Mozilla specific section.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff');
}
@-moz-font-face {
font-family: 'MyWebFont';
src: url('webfont.ttf') format('truetype');
}
Solution 5
Answer by Tom & font-spring didn't do it for me for some reason. This fix by Sam Goddard did though :
After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:
// font-face inclusion
@font-face {
font-family: 'font-name';
src: url('path-to-font/font-name.eot');
src: url('path-to-font/font-name.eot?#iefix') format('eot'),
url('path-to-font/font-name.woff') format('woff'),
url('path-to-font/font-name.ttf') format('truetype'),
url('path-to-font/font-name.svg') format('svg');
font-weight: normal;
font-style: normal;
}
As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.
// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ‘font-name';
src: url(‘path-to-font/font-name.svg’) format(‘svg’);
}
}
Comments
-
Joey over 3 years
I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and pixelated.
What i have found out so far is that Chrome requires the .svg format font to be loaded first. The font i am using however, called Asap, was only available in .woff. I converted it to .svg using a free online service, but when i added that to my stylesheet (before the .woff), it didn't change anything.
I've also tried:
-webkit-font-smoothing: antialiased; text-shadow: 0px 0px 0px;
Hoping that either would help the text render more smoothly.
Right now i've run out of ideas and i would hate to change fonts. Does anyone have an idea how i can solve this problem? I've been using the Adobe Browserlab to test the rendering, seeing as how i only own a mac. The link to the site is: www.symvoli.nl/about
Thanks in advance!
Edit April 11th, 2013:
Chrome 35 Beta seems to have finally solved this issue:
-
Joey almost 12 yearsBut this unfortunately doesn't explain why it does render perfectly in OS X based browsers and, to my own surprise, Internet Explorer. But if anything, i will definitely look into this solution to at least try to smooth it out a little
-
Keith almost 12 yearsGoogle Chrome uses anti-aliasing but the text looks more pixelated than in other browsers because it only supports horizontal anti-aliasing.
-
jazzy almost 11 yearsIt's a shame this is still an issue (last update Apr 24, 2013) code.google.com/p/chromium/issues/detail?id=137692#c104
-
iono almost 11 yearsHow does this look on non-Windows Chrome?
-
David Jones almost 11 yearsI actually didn't have to modify the Fontsquirrel/Fontspring bulletproof syntax – I just used it as is and it fixed the rendering problem.
-
Alex G almost 11 yearsWhere to get SVG-files if only TTFs are available?
-
Admin over 10 yearswhy then if you call from googles cdn (which is faster and a better practice ) do they send the true type before the svg. Bad google
-
Paul Richter over 10 yearsIt is preferable to add the relevant example, or information, rather than simply supply a link. Should the link ever go dead; you're left with an answer that has no substance.
-
Catch22 over 10 yearsThe Fontspring blog post has been updated to suggest using a Chrome specific media query to avoid some spacing issues when using SVG - fontspring.com/blog/smoother-rendering-in-chrome-update
-
Tomas Ramirez Sarduy over 10 yearsThanks @Catch22, added to my answer!
-
sidonaldson about 9 yearsThis answer should be removed as Chrome no longer supports SVG Fonts!
-
Tomas Ramirez Sarduy about 9 years@sidonaldson: I updated the answer, but there is no reason to remove the answer, even now when the issue is solved
-
sidonaldson about 9 years@TomSarduy sorry, I didn't actually mean deleted!