Google web fonts look weird in Chrome - how to apply the fix

Question

This is a common problem, and there seems to be a solution. The problem is that web fonts show intermittent chrome. The solution should be to move the .svg call before the .woff call. Explanation here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

The problem is that I use google web fonts and import the font as follows:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

And I don’t know and can’t find out how to import it with the @font-face css tag instead of the above. I tried but got stuck since Google only offers the font in ttf and not svg or woff.

Hope you can help.

Answer 1

You will need to place the fonts yourself if you want to apply this hotfix.

Your Google Fonts link is a style sheet request that is dynamically generated based on the parameters you supply and browser detection. For your example link:

 <link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

If you really make the request yourself using curl :

 $ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic 

this is what gets sent back:

 @font-face { font-family: 'Asap'; font-style: normal; font-weight: 400; src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype'); } @font-face { font-family: 'Asap'; font-style: normal; font-weight: 700; src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype'); } @font-face { font-family: 'Asap'; font-style: italic; font-weight: 400; src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype'); } @font-face { font-family: 'Asap'; font-style: italic; font-weight: 700; src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } 

The easiest thing is to go back to Google web fonts, download the appropriate font by going here and clicking the download arrow.

Then you can use the proposed fix here , referring to the font files that you downloaded:

 @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'); } 

Answer 2

Have you made the correct reset for all styles?

Your inconsistent rendering experience may be triggered by your default browser settings.

A reset.css sets all elements back to their default values, so cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the most popular meyerweb reset css . Another way to reduce inconsistency is to use normalize.css.

The difference between the two approaches is brief: reset.css just resets all browser-specific styles, while normalize.css has a wider scope, creating cross-server defaults.

The differences between the two are explained here by the normalize.css developer.

If all these links do not help make sure that you set the font weight correctly, import all the necessary fonts.

Here you can read about font weights: http://css-tricks.com/watch-your-font-weight/ You should also apply this technique when using normalize.ccs because it does not reset the font-weight value as rest .css.

Answer 3

Add this to the stylesheet for each item.

 opacity: .99; 

For example -

 p, li { opacity: .99; } 

I have no idea why this works, but it happened.