为什么在 ubuntu 18.04 上的 Firefox 上没有加载谷歌字体？答案

【问题标题】：Why is google fonts not loading on firefox on ubuntu 18.04?为什么在 ubuntu 18.04 上的 Firefox 上没有加载谷歌字体？
【发布时间】：2020-05-13 22:01:47
【问题描述】：

我收到了这条消息：

跨域请求被阻止：同源策略不允许读取位于https://fonts.googleapis.com/css?family=Montserrat:400,500,6…700%7COpen+Sans:300,300i,400,400i,600,600i,700,700i%7CImpact 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

这是页面上正在加载的 javascript：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    active: function() {
      $(document).trigger('fonts-loaded')
    },
    google: {
      families: ['Montserrat:400,500,600,700', 'Open Sans:300,300i,400,400i,600,600i,700,700i', 'Impact']
    }
  });
</script>

我了解该问题的基本情况，但我不明白作为客户端我能做些什么来解决它，因为我能找到的所有解决方案都是服务器端的。

这里是网址https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7COpen+Sans:300,300i,400,400i,600,600i,700,700i%7CImpact

【问题讨论】：

在浏览器中，你的网页的url是哪个？
此问题专门发生在 localhost:3000 和 my-app.herokuapp.com 上。由于我无法控制 Google 的 CORS 设置，我认为他们会将它们设置为 *...
Google 自己的 getting started 页面存在 cors 问题，所以我不知道我们其他人还有什么希望...

标签： ubuntu firefox google-font-api

【解决方案1】：

1) 要解决此问题，请使用带有开发工具的浏览器，例如 Chrome 和 Firefox：

使用谷歌字体打开浏览器和网页
按 F12：您应该会看到开发者工具的窗口
重新加载网页
工具：切换到网络标签
现在您可以准确地看到服务器的响应以及 HTTP 标头

这样您就可以看到 CORS 设置。

2) 可能他们只是屏蔽了“localhost”

您可以尝试将页面放到网上（在面向互联网的主机上）吗？

3) 从其他位置加载字体

有免费的 CDN 缓存最常用的库。我建议你尝试从Cloudflare加载谷歌字体

【讨论】：

这是一个很好的答案，感谢您抽出宝贵的时间！我想我在 heroku 域上验证了它，但我不是 100% 确定。我放弃了，改用 Typekit。除了没有我使用 Google Fonts 的字体之一之外，它的效果很好。