Firefox 中未显示 Google 字体答案

【问题标题】：Google font not showing in firefoxFirefox 中未显示 Google 字体
【发布时间】：2019-04-18 03:00:36
【问题描述】：

对于我的网站，我使用了几种谷歌字体：

@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”字体没有显示。

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

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

【问题讨论】：

这对我来说在 Firefox 中运行良好：jsfiddle.net/6vb6pjz4
继续重新加载页面。一段时间后它可能会正常工作。

标签： css firefox fonts google-font-api

【解决方案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' />

【讨论】：

【解决方案2】：

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

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

刚刚添加：

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

现在字体在每个浏览器中都正确呈现了！

【讨论】：

这对我不起作用。就我而言，我的笔记本电脑安装了蒙特塞拉特。 Firefox 正在使用它。我删除了它。然后 Firefox 开始使用从 googleapis.com 下载的字体，这解决了问题。

【解决方案3】：

当您使用 Google Fonts 中的字体时，您根本不需要使用 @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。

【讨论】：