google font not displayed in Chrome

Question

I have a very weird problem.

I am using google fonts on my website. Everything is displayed correctly in Firefox, Internet Explorer and even Opera.

But in Google Chrome, the font "Comic sans MS" is displayed instead.

In this screenshot you can see firefox and chrome displaying the same page. The font is working in firefox (left) but bugged in Chrome (on the right) http://gyazo.com/43462de300f4fb358cdf22c77e1955cd

You can see the page live here: https://www.no-gods-no-masters.com/A-12443978/t-shirt-liberation-animale-vegetarien-vegan-ALF-animal-liberation-front

Note that i am also using another google font (Doppio One) on the floating navigation bar (on the top). This one is working in Chrome

The font is loaded here:

    @font-face {
    font-family: 'goboldregular';
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot');
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.woff') format('woff'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.ttf') format('truetype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.svg#goboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 1

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 *;
}