【问题标题】：Google Fonts are not rendering on Google ChromeGoogle 字体无法在 Google Chrome 上呈现
【发布时间】：2014-03-27 11:53:37
【问题描述】：

我正在构建一个新的 WordPress 主题（不知道这是否相关），这个问题一直困扰着我。

我已经从 Google Webfonts 加载了 Roboto Slab（包括 <head> 部分中的 CSS）。在所有其他浏览器上，字体都呈现正常，除了谷歌浏览器。当我第一次在 Google Chrome 中加载网站时，根本不会显示使用该自定义字体的文本（即使字体堆栈也将格鲁吉亚作为后备 - "Roboto Slab", Georgia, serif;）。在我悬停样式链接后，或在 Inspector 中重新触发任何 CSS 属性 - 文本变得可见。

自从我前段时间开始使用该主题以来，我清楚地记得它之前运行良好。这是最近已知的 Chrome 更新错误吗？

首次加载：

在我重新应用任何 CSS 属性后，进入响应式视图或悬停元素：

有人有类似的问题吗？我应该如何处理？

谢谢！

【问题讨论】：

您是否检查过页面加载时间线，您的字体是否被正确获取？
你试过缓存刷新吗？ (ctrl+f5) 如果您没有在字体链接中添加“http://”，有时也会发生这种情况。
嘿，是的，字体提取正常。 CTRL+F5 没有帮助，因为我在几个不同的桌面上检查过它。现在，我已经设法通过在应该应用此字体的元素上绑定自定义 jQuery redraw() 函数来解决这个问题。它可以工作，但我仍然想知道为什么没有像这样的黑客它就不能工作。
人们还在遇到这个问题吗？我曾经使用过，但似乎 Google 已修复它？
这个问题是否也适用于 Android 设备上的 Chrome？

标签： html css google-chrome google-webfonts

【解决方案1】：

显然是known Chrome bug。有一个纯 CSS 的解决方法可以解决这个问题：

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

似乎只需要告诉 Chrome 重新绘制文本

【讨论】：

其实这样完美解决了问题！非常感谢！
我最近的网络项目遇到了这个问题，这让我发疯了，非常感谢！
嗯，错误论坛中的其他人能够使用 jquery 使其工作（但我无法）： jQuery('body') .delay(500) .queue( function( next){ jQuery(this).css('padding-right', '1px'); } );
这一直困扰着我！
这很完美。对我来说，这个 CSS 是 javascript 解决方法的更好替代方案。但是，如果这对您不起作用，请尝试 jQuery(function() { jQuery('body').hide().show(); });

【解决方案2】：

如果 css 修复对您不起作用

如果first rated post 不起作用，这里有一个解决方案：

删除以下中的“http:”：

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>

或

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

正如David Bain 所解释的，大多数现代浏览器实际上并不要求您指定协议，它们会根据您调用它的上下文“推断”协议

【讨论】：

这个。所有这些 sill JS 和 CSS hack，你需要做的就是删除“http:”
同样从未有过，仍然是问题。
只有当您的网站运行 https 时，这才是一个有效的答案，因为您试图从浏览器不允许的 http 资源中提取。

【解决方案3】：

CSS 修复对我不起作用，而且 0.5 秒延迟脚本似乎很尴尬。

这个 JS sn-p 似乎对我们有用：

<script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>

【讨论】：

这只是间歇性地为我修复它，希望我能收回我的投票。
@KarlGlaser 你可以。再次单击“向上”以恢复为中性。（点击“down”跳过投票）。
@OJFord 过了宽限期就得编辑

【解决方案4】：

单独尝试了上面的css修复，但没有成功。最后通过创建包含以下内容的样式表（chrome.css）解决：

body {
 -webkit-animation-delay: 0.1s;
 -webkit-animation-name: fontfix;
 -webkit-animation-duration: 0.1s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
}

@@-webkit-keyframes fontfix {
 from { opacity: 1; }
 to   { opacity: 1; }
}

并在页面底部使用 jquery 加载它：

<script type="text/javascript">
   $(document).ready(function () {
      $('head').append('<link href="/chrome.css" rel="stylesheet" />');
   });
</script>

【讨论】：

尽管它的评分低于公认的答案，但这个解决方案是唯一对我有用的解决方案。
这给出了一个错误：GET https://<insert domain name here>/chrome.css net::ERR_ABORTED 404
Javascript 代码修复了渲染问题！

【解决方案5】：

我已经合并了上面的 CSS ...但我还在我的标题中包含了以下 javascript：

（注意，我知道我没有在下面的代码中自定义字体。但无论如何，它似乎仍然有助于强制 Chrome 重新绘制页面上的字体......只要确保你的字体在其他地方被正确引用)

将上面提到的 CSS 与我的...中包含的以下代码结合使用，最坏的情况是，我页面上的所有字体都会在延迟一秒左右后显示出来。

希望这对人们有所帮助。干杯。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(function() { $('body').hide().show(); });
</script>


<script type="text/javascript">

//JavaScript goes here


WebFontConfig = {
  google: { families: ['FontOne', 'FontTwo'] },
    fontinactive: function (fontFamily, fontDescription) {
   //Something went wrong! Let's load our local fonts.
    WebFontConfig = {
      custom: { families: ['FontOne', 'FontTwo'],
      urls: ['font-one.css', 'font-two.css']
    }
  };
  loadFonts();
  }
};

function loadFonts() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
}

(function () {
  //Once document is ready, load the fonts.
  loadFonts();
  })();

</script>

这是我找到上述内容的地方： https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

【讨论】：

【解决方案6】：

我使用 JS 解决方案修复了它，但还需要使用最新的 google 托管 jquery (1.11) 来修复它。

【讨论】：

【解决方案7】：

我刚刚遇到了同样的问题。我是由于here 所述的 HTTP/S 协议不匹配造成的。

使用 https 版本的 URL。

【讨论】：

【解决方案8】：

查看类似问题Strange Issue while Google Font Rendering。

解决方案是从 Mozilla CDN 而不是 Google CDN 加载所需的字体（我的情况是“Fira Sans”）。

【讨论】：

【解决方案9】：

这不是一个实际的解决方案，但它对我来说比这个线程中的其他所有东西都好。我改变了字体。我有 Fira Sans，现在只是改为 Roboto，它可以开箱即用。

【讨论】：

【解决方案10】：

我刚刚从我的 Windows 字体中删除了roboto字体，现在一切正常。

这可能是因为您的系统上有旧版本的字体。我猜。

【讨论】：

【解决方案11】：

我正在尝试使用 Meg 的答案，但和许多其他人一样，它对我也不起作用。

为了使用谷歌字体，发现了这个技巧[为步骤添加屏幕截图]。

1) 只需从突出显示的 css 或标准链接中获取 url。

2) 在另一个选项卡中打开链接，将整个 css 代码（即字体）复制到您的 css 文件中并运行。

不确定性能，因为添加了许多 http 调用，或者只是尝试复制一种字体。

第 1 步的图片

第 2 步的图片

【讨论】：

【解决方案12】：

元素可能设置了text-rendering: optimizeLegibility，这可能会导致此问题或类似问题。将其更改为 auto 为我解决了这个问题，Foundation 5 项目默认将其设置为 optimizeLegibility。

【讨论】：

【解决方案13】：

如果有人仍在努力解决这个问题（2019 年），Google 字体 CSS 生成器脚本中似乎存在错误。

我用以下标签加载了我的字体：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">

文件中的每个@font-face 都包含这样的一行：

src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');

如您所见，local('sans-serif') 放在远程 URL 之前，这是错误的。这会导致 Chrome 加载默认的无衬线字体而不是请求的字体。

一个简单的解决方法是将 URL 的 font-weight 部分重新排序，从 Roboto:400,300 到 Roboto:300,400。这会导致生成器不包含local('sans-serif') 源。

希望对某人有所帮助。

【讨论】：

【解决方案14】：

我只是分享对我有用的方法。您的结果可能会有所不同。

我有 main.css 和多个字体的 @import，由 |（管道）字符分隔。这一直工作到今天。我将所有谷歌字体导入保存在主 CSS 文件中，因为我没有那么多。今天我添加了一个在 Chrome 或 Firefox 中根本不会呈现的内容。我尝试了不同的字体 - 同样的问题。

最后，我在另一个 CSS 文件中创建了一个单独的 @import，该文件会为网站上的多个页面加载（例如，我们称之为 navbar_pages.css） - 这个 CSS 通过 <link rel="stylesheet" type="text/css" href="/css/navbar_pages.css"> 包含在相关页面中，就像main.css 一样。

出于某种原因，将 @import 放在单独的 CSS 文件中解决了这个问题。

我怀疑这是由于在单个@import 调用中可以调用的字体数量受到限制。应该做更多的测试来确定原因，但现在有我的解决方法。如果有人有见解，请发表评论。

【讨论】：

【解决方案15】：

它可能不是灵丹妙药，但可以通过将 fontawesome css 链接移动到我们页面底部以及上面列出的 weblike 修复来解决我们网站上的问题。

【讨论】：

【解决方案16】：

如果在您尝试此处所有出色的解决方案之前人们仍然遇到此问题，请尝试在您的 css 中使用 !important 标记以查看是否可以解决它，就像它对我所做的那样，我不确定该错误是否是与旧的 Chrome 错误相同。

.faultyText {"Roboto Slab", Georgia, serif !important}

【讨论】：

【解决方案17】：

我制作的结帐插件：https://chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok

它使用纯 javascript 重新对齐网络，这会强制浏览器重绘整个页面。

【讨论】：

我们希望修复是全球性的，不仅适用于安装自定义插件的用户。