谷歌字体没有显示在Firefox中

Question

对于我的网站我使用几个谷歌字体：

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

在Chrome和Safari中工作得很好，但在Firefox（我试过47和47.0.1）中，字体“蒙特塞拉特”并没有被取代。

这很奇怪，因为我没有在控制台中出现网络错误或没有其他错误，只有一个不能正常工作，另一个工作正常。

你知道任何解决方案吗？谢谢！

Answer 1

我也有这个问题。然而，我确实在链接标记中加载了谷歌字体。以下对我有用，但我不确定原因。

最初我的链接标签看起来像这样（在Firefox中不起作用）：

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

但是当我删除'https：'时，它确实有效。像这样：

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

Answer 2

正如你们所指出的那样，我发布的代码在Firefox上运行。问题是font-family被另一个css覆盖（仍然不知道为什么这只发生在Firefox ...）。我刚刚创建了这个类：

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

并补充说：

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

现在，在每个浏览器中都可以正确呈现字体！

Answer 3

当您使用Google字体中的字体时，根本不需要使用@font-face。如果需要，可以通过类使用这些字体，如下所示：

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>

当你在font-family: 'Raleway', sans-serif之后写font-family: 'Montserrat', sans-serif时，它将覆盖蒙特塞拉特与Raleway的字体，这就是为什么而不是蒙特塞拉特你会看到Raleway。