Google font not showing in firefox

问题

for my website I'm using couple of google fonts:

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,300italic,400italic&subset=latin,latin-ext);

@font-face {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Raleway', sans-serif;
}

The work well in Chrome and Safari, but in Firefox (I tried 47 and 47.0.1) the font "Montserrat" is not displaied.

It's very curious because I get no network error or no other error in the console and only one is not working, the other one is working fine.

Do you know any solutions? Thanks!

回答1:

I had this problem too. I did however load the google font in a link tag. The following worked for me, but I am not sure why.

Originally my link tag looked like this (didn't work in Firefox):

<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Lato:300,400' />

It did however work when I removed the 'https:'. Like this:

<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Lato:300,400' />

回答2:

As you guys were pointing out the code I posted works on Firefox. The problem was that the font-family was override by another css (still don't know why this was happening only in Firefox...). I just created this class:

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

And just added:

.font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

Now the font is properly rendered in every browser!

回答3:

When you use Fonts from Google Fonts, you don't need to use @font-face at all. Use those fonts through classes if you want, like this:

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,300italic,400italic&subset=latin,latin-ext);

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.font-raleway {
    font-family: 'Raleway', sans-serif;
}

HTML

<p class="font-montserrat">This is Montserrat</p>
<p class="font-raleway">This is Raleway</p>

When you write font-family: 'Raleway', sans-serif after font-family: 'Montserrat', sans-serif it will just override the font Montserrat with Raleway so that's why instead of Montserrat you will see Raleway.

来源：https://stackoverflow.com/questions/38400486/google-font-not-showing-in-firefox

标签

css

firefox

fonts

google-font-api