谷歌字体在 Chrome 中不显示

Question

我有一个非常奇怪的问题。

我在我的网站上使用谷歌字体。一切都可以在 Firefox、Internet Explorer 甚至 Opera 中正确显示。

但在 Google Chrome 中，显示的是“Comic sans MS”字体。

在此屏幕截图中，您可以看到 Firefox 和 Chrome 显示同一页面。该字体在 Firefox（左）中工作，但在 Chrome（右）中出现错误 http://gyazo.com/43462de300f4fb358cdf22c77e1955cd

您可以在这里看到该页面： https: //www.no-gods-no-masters.com/A-12443978/t-shirt-liberation-animale-vegetarien-vegan-ALF-animal-liberation-front

请注意，我还在浮动导航栏（顶部）上使用了另一种谷歌字体（Doppio One）。这个可以在 Chrome 中运行

字体在这里加载：

    @font-face {
    font-family: 'goboldregular';
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot');
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.woff') format('woff'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.ttf') format('truetype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.svg#goboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 1

你的第一个问题是，在@font-face中，你的字体系列是“goboldregular”，并且在你的h2标题上，你将字体系列设置为'gobold', cursive（草书在MS Windows上制作后备字体漫画sans）。您在样式中引用的字体系列名称应与您在字体声明中设置的名称相同。因此，对于问题的第一部分，您应该更改标题标记上的内联样式以具有font-family: 'goboldregular', cursive.

第二个问题是，当我进行上述详细更改时，我收到以下控制台错误：

来源“ https://no-gods-no-masters.com ”的重定向已被跨源资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“ https://www.no-gods-no-masters.com ”。

这意味着您的字体没有设置“Access-Control-Allow-Origin”。可以通过编辑 .htaccess 文件（如果您使用的是 Apache 服务器）或 httpd.conf（如果您使用的是 ngix）添加以下代码片段来修复此问题：

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}