Google Fonts Are Not Rendering on Google Chrome

Google Fonts are not rendering on Google Chrome

Apparently it's a known Chrome bug. There's a css-only workaround that should solve the problem:

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

It seems like Chrome just needs to be told to repaint the text

Google Chrome doesn't render Google Web Fonts correctly

Someone noticed the same problem here: Chrome for Android does not display Google webfonts correctly

I noticed the problem as well today. The Google Web Fonts are simply not rendered by Chrome for Android on my Nexus 7 (Android 4.2.2), when integrated from Google directly. I also noticed the same problem on Chrome for MacOS X.

To get around this, you could simply download the fonts and convert them on http://www.fontsquirrel.com/ for web usage.

google font not displayed in Chrome

Your first problem is that in @font-face your font-family is 'goboldregular' and on your h2 headers you set font-family to 'gobold', cursive (cursive is making fallback font comic sans on MS Windows). Font-family name you are referencing in your styles should be same as the one you set in your font-face declaration. So, for the first part of the problem you should change inline styles on your header tags to have font-family: 'goboldregular', cursive.

Second problem is, when I make change detailed above I get following console error:

Redirect at origin 'https://no-gods-no-masters.com' has been blocked
from loading by Cross-Origin Resource Sharing policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://www.no-gods-no-masters.com' is therefore not
allowed access.

This means your font doesn't have 'Access-Control-Allow-Origin' set. This can be fixed by editing your .htaccess file (if you are using Apache server) or httpd.conf (if you are using ngix) by adding following snippet:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

---

Related Topics