Geek Answers Handbook

Google font not showing up in Chrome

I have a very strange problem.

I use Google fonts on my website. Everything displays correctly in Firefox, Internet Explorer, and even Opera.

But Google Chrome displays the font "Comic sans MS" instead.

In this screenshot, you see how firefox and chrome render the same page. The font works in firefox (left), but listens in Chrome (right) http://gyazo.com/43462de300f4fb358cdf22c77e1955cd

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

Please note that I also use a different google font (Doppio One) in the floating navigation bar (top). This one works in Chrome

The font is downloaded 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;

}
+4
source share
3 answers

Your first problem is that in the @ font-face font your font family is “goboldregular”, and in the h2 headers you set the font family to 'gobold', cursive(italics copy the fonts to MS Windows). The font family name that you specify in your styles should be the same as the name specified in the font declaration. So, for the first part of the problem, you have to change the inline styles in your header tags to have font-family: 'goboldregular', cursive.

The second problem is that when I make the changes described above, I get the following console error:

'https://no-gods-no-masters.com' Cross-Origin: Access-Control-Allow-Origin . Origin 'https://www.no-gods-no-masters.com', , .

, "Access-Control-Allow-Origin". , .htaccess( Apache) httpd.conf( ngix), :

# 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 *;
}
+4

Chrome :

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


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

, , , .

CSS, /, , . ! CSS.

, , .

+3

As Theodragovich said:

You have a cross domain policy issue. But I think you are redirecting from a non www no-gods-no-masters.comdomain to a domain www.no-gods-no-masters.com. This will also be with your font files, which are in the no-www domain.

Just add www to the ad @font-face

@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;

}
+3
source

More articles:


All Articles