Google 字体在 firefox 中不显示

Question

我的网站使用了几种 google 字体：

@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）字体 "Montserrat" 不显示。

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

你知道什么解决办法吗？谢谢！

Answer 1

当您使用 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: 'Montserrat', sans-serif 之后写 font-family: 'Raleway', sans-serif 时，它只会用 Raleway 覆盖 Montserrat 字体，这就是为什么你会看到 Raleway 而不是 Montserrat 的原因。

Answer 2

正如你们所指出的，我发布的代码适用于 Firefox。问题是字体系列被另一个 css 覆盖（仍然不知道为什么这只发生在 Firefox 中......）。我刚刚创建了这个 class:

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

刚刚添加：

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

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

Answer 3

我也有这个问题。但是我确实在 link 标签中加载了 google 字体。以下对我有用，但我不确定为什么。

最初我的 link 标签看起来像这样（在 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' />

Google 字体在 firefox 中不显示

Google font not showing in firefox

css

firefox

fonts

google-font-api