Google Websites Display Volatility in Chrome on Windows

Question

I use the Google Webfonts service on my website and rely heavily on it. It works great in most browsers, but it does especially poorly on Chrome on Windows. Very changeable and uneven.

What I have found out so far is that Chrome requires the .svg format font to be loaded first. However, the font I'm using, called Asap, is only available in .woff. I converted it to .svg using a free online service, but when I added it to the stylesheet (before .woff), it didn’t change anything.

I also tried:

-webkit-font-smoothing: antialiased; text-shadow: 0px 0px 0px; 

Hoping this helps make the text smoother.

Now I'm out of ideas, and I would not want to change the fonts. Does anyone have an idea how I can solve this problem? I use Adobe Browserlab to check the rendering, seeing that I only have my own Mac. Link to the website: www.symvoli.nl/about

Thanks in advance!

Edit April 11, 2013:

Chrome 35 Beta seems to have finally solved this problem:

Answer 1

August 2014 update

Google finally fixes this problem in Chrome 37 initially. But for historical reasons, I will not delete this answer.

Problem

The problem arises because chrome cannot actually display TrueType fonts with the correct anti-aliasing . However, chrome still displays SVG files. If you move the call of your svg file to your syntax above woff, chrome will load svg and use it instead of the woff file. Some tricks, as you suggest, work well, but only on certain font sizes.

But this error is very well known to the Chrome development team and has been working since July 2012. See the official bug report here: https://code.google.com/p/chromium/issues/detail?id=137692

October 2013 Update (thanks to @ Catch22)

Apparently, some sites may have intermittent issues when rendering svg . So there is a better way . If you invoke svg with Chrome-specific multimedia request, the interval problems disappear:

 @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'MyWebFont'; src: url('webfont.svg#svgFontName') format('svg'); } } 

The solution to the first approach:

The Flettspring syntax is bulletproof, modified for the first svg:

 @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
• Smoothing web fonts in Chrome for Windows
• How to create empty web fonts @ font-face

Answer 2

 -webkit-text-stroke: 0.5px; 

use it only for large text, as this will affect the performance of your page.

Answer 3

A fix was proposed here by first calling the .svg file, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Answer 4

I tried a number of solutions and finally came up with one that works with newer versions of Chrome that do not fall under file reordering:

Essentially, I moved the TTF file to a separate Mozilla 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'); } 

Answer 5

For some reason, Tom and font-spring did not answer this question. This is Sam Goddard's fix, though:

After experimenting, I came across what seems like a decent, very easy solution to this problem. It appears that Chrome uses the .svg file in the @ font-face set and does not want to be called the 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 you can see from the example, the .svg file appears last in the list of called URLs. If we change the code for the target web browsers, then tell them that they will use 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'); } } 

Answer 6

It may just be the font that you use "asap" that doesn’t do so well at certain sizes. I resized your h1 from 3.5em to 50px and it looks a little better. It may not be an ideal solution, but I noticed that many google websites can be unpredictable.

Answer 7

I am developing in Firefox. My experience is that FF renders ttf fonts very well without any additional rules (besides @ font-face, calling the url for the font file). However, Chrome is a completely different story. Even with -webkit-font-smoothing: smoothing; The rule still displays any font rather tattered. Safari doesn't seem to have this problem, so Webkit is not inherently unable to display the font, it is a Chrome issue.

I have not tried adding -webkit-text-stroke: 0.5px; rule, but will be.

From the answers above, I really like that Tom Sarduy answers best. In addition to a good description of the problem, it provides a large @ font-face stack for use with all major browsers.

Answer 8

Another link links for rendering web fonts in chrome -

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Answer 9

It was the same guys. Good on all browsers except chrome - even IE10 and 9 were fine. Dreamwaeevr CS6 also uses a similar version of the fontsprings code, but has svg at the end. Change it for SVG to woff and ttf, and everything in the world is good. Tom came across an example of hos, in fact it is the past, that in your code and the map path to the fonts that you need, and you are in business!

Answer 10

It seems that Google may serve different Woff files depending on the browser and OS.

I found that if I download the font from IE, it is about 10 thousand more than if it were made on Safari with Mac for a specific font. 43k vs 33k. Also, the IE version looks great on a Mac, but the Mac version does not seem to work fine on a PC. The Mac version looks worst in Mozilla Firefox on PC.

Try the following: http://fonts.googleapis.com/css?family=Source+Sans+Proced00,600,400italic,600italic

SourceSansPro-Regular.woff PC Version 27k

SourceSansPro-Regular.woff Apple version 24k

Answer 11

I tried many ways: - loading svg using font -webkit-font-smoothing ...

after

 -webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0); 

the rotation was smoother, but the main problem did not disappear.

For me, the solution added:

 -webkit-text-stroke: 0.5px; 

Answer 12

https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/

This post explains a bit about the google chromes experimental feature. Apparently, enabling the "DisableWrite" option eliminates jagged fonts. This is obviously a PER fixer, but not a complete one.