谷歌字体在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;

}

- libertaire

---

这不是谷歌字体。 - yunzen

我认为你的"gobold"或"goboldregular"字体根本没有加载。还有，在哪个CSS文件中设置了你的@font-face规则？请澄清一下。 - Sai

你说页面在IE和FF中显示正常，但实际上并没有。 - Salman A

Answer 1

您的第一个问题在于，在@font-face中，您的字体名称为“goboldregular”，而在h2标题中，您将字体设置为'gobold'，cursive（在MS Windows上，草书会使备用字体变成comic sans）。您在样式中引用的字体名称应与您在@font-face声明中设置的名称相同。因此，对于问题的第一部分，您应该更改标题标签上的内联样式，以使其具有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 *;
}

- Teo Dragovic

Answer 2

就像TeoDragovic所说的：

您有一个跨域策略问题。 但我认为，您从非www域名no-gods-no-masters.com重定向到域名www.no-gods-no-masters.com。这也适用于驻留在无www域上的字体文件。

只需在@font-face声明中添加www即可。

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

}

- yunzen

Answer 3

Chrome检查器显示此元素的行内样式：

element.style {
  text-align: left;
  font-family: 'Gobold', cursive;
  text-shadow: 2px 2px 4px #AAA;
  font-size: 26px;
  padding-left: 5px;
  color: #000;
}

然而，该字体尚未加载。

<link href='https://fonts.googleapis.com/css?family=Aldrich|Doppio+One|Lemon|Candal' rel='stylesheet' type='text/css'>

你看到的字体不是Comic Sans，它是浏览器默认的草书字体。

我在你的CSS中没有看到你为这个元素/类加载另一个字体，无论如何，内联样式始终是级联中的最后一个，除非你在CSS中使用!important覆盖它。

你应该在这里发布一些代码，这样我们才能更好地了解你正在处理什么。

- TEN Design

---

我编辑了帖子，并展示了加载Gobold字体的代码。 - libertaire

我忘了 Gobold 不再在 Google Fonts 上，所以我不得不将字体托管在自己的服务器上。 - libertaire

@libertaire，goboldregular不是Gobold的相同名称。如果您想使用该字体系列名称，请编辑导入规则。 - Tieson T.

尝试在div样式中使用"goboldregular"代替"gobold"，但仍然无效。 - libertaire

你在 CSS 中设置了 @font-face 吗？ - TEN Design