CODEWITHSUNDEEP
htmlcssgoogle-chromefonts
libertaire
libertaire

Reputation: 855

google font not displayed in Chrome

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;

}

Upvotes: 4

Views: 2559

Answers (3)

yunzen
yunzen

Reputation: 33439

Like TeoDragovic said:

You have a Cross Domain Policy issue. But I think, you have a redirect from non www domain no-gods-no-masters.com to the domain www.no-gods-no-masters.com. This will also be with your font files which reside on the no-www domain.

Just add the www to the @font-face declaration

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

}

Upvotes: 3

Teo Dragovic
Teo Dragovic

Reputation: 3518

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

Upvotes: 5

TEN Design
TEN Design

Reputation: 717

Chrome inspector shows an inline for this element:

element.style {
  text-align: left;
  font-family: 'Gobold', cursive;
  text-shadow: 2px 2px 4px #AAA;
  font-size: 26px;
  padding-left: 5px;
  color: #000;
}

yet that font is not loaded in 

<link href='https://fonts.googleapis.com/css?family=Aldrich|Doppio+One|Lemon|Candal' rel='stylesheet' type='text/css'>

The font you are seeing there is not comic sans, its the browser's default cursive.

I could not see in your CSS where you have another font loading for this element/class, regardless the inline style is always last in the cascade. unless you override it with !important in your CSS.

You should post some code here so we can see more what you are working with.

Upvotes: 3

Related Questions