谷歌字体未在 Chrome 中显示答案

【问题标题】：google font not displayed in Chrome谷歌字体未在 Chrome 中显示
【发布时间】：2014-12-17 00:35:25
【问题描述】：

我有一个很奇怪的问题。

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

但在谷歌浏览器中，显示的是“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;

}

【问题讨论】：

这不是谷歌字体
我认为您的“gobold”或“goboldregular”字体根本没有加载。还有哪个 css 文件有你的 @font-face 规则？请澄清
您是说页面在 IE 和 FF 中按预期显示。不，它没有。

标签： html css google-chrome fonts

【解决方案1】：

您的第一个问题是，在@font-face 中，您的 font-family 是“goboldregular”，而在 h2 标题中，您将 font-family 设置为 'gobold', cursive（cursive 是在 MS Windows 上制作后备字体漫画 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”。这可以通过添加以下 sn-p 来编辑您的 .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 *;
}

【讨论】：

【解决方案2】：

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 覆盖它。

您应该在此处发布一些代码，以便我们可以看到更多您正在使用的内容。

【讨论】：

我编辑了帖子以显示加载 Gobold 字体的代码
我忘记了 Gobold 不再出现在 Google 字体上，所以我不得不在自己的服务器上托管字体
@libertaire goboldregular 与 Gobold 不同。如果您想使用该字体 - 家族名称，请编辑导入规则。
尝试在 div 样式中使用“goboldregular”而不是“gobold”，还是不行。
你在你的 CSS 中设置了你的@font-face 吗？

【解决方案3】：

就像 TeoDragovic 说的：

您遇到了跨域策略问题。但我认为，您有一个从非 www 域 no-gods-no-masters.com 到域 www.no-gods-no-masters.com 的重定向。这也适用于位于 no-www 域中的字体文件。

只需将 www 添加到 @font-face 声明中

@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;

}

【讨论】：