logo标签列表

Gatsby.js：在不阻塞渲染的情况下加载Google字体以供排版主题使用

typographygoogle-font-apigoogle-pagespeedgatsbyrender-blocking
10

我正在使用Gatsby.js和它的Typography插件，配合Irving主题。

该主题需要谷歌字体“Exo”和“Yrsa”，并将其引入到导出的静态HTML文件的<head>部分。

<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>

这个导入的内容会阻塞渲染，如果可能的话我希望避免使用它，这对用户和我的Google PageSpeed Insights分数都有好处。

我尝试使用 gatsby-plugin-google-fonts 并将以下内容添加到我的 gatsby-config.js：

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Exo\:700`,
      `Yrsa\:400,700`,
    ],
  }
},

然而这只是增加了第二个导入调用。我应该把它们放在静态目录中吗？即便如此，我如何配置Typography仍然可以使用这些字体而不必单独导入它们呢？

它们被链接在头部以帮助避免FOUT。Google优化的服务器很可能是为您的用户提供这些字体的最佳选择。然而，如果您更喜欢速度而不是样式，那么您可以完全放弃主题中的这些字体，或者尝试使用TypeKit的Web Font Loader。 - jaegs
我认为消除FOUT是一个优先考虑的问题。Typekit可以异步加载，并允许您通过在.wf-loading类上设置display: none;来隐藏内容，直到字体准备就绪，从而防止FOUT。这是一个相当简单的解决方案，我希望Google Fonts也有类似的功能。 - dougmacklin
谢谢，这看起来很有前途！如果我错了，请纠正我，但我们仍然需要一种方法来防止 Gatsby + Typography 添加常规字体导入标签，否则我们仍然会渲染阻塞并尝试两次导入相同的字体（一次同步和一次异步）。 - dougmacklin
另一个选项是使用最近添加的新选项，将 Google 字体替换为 Typefaces 中的字体 https://github.com/gatsbyjs/gatsby/pull/3621 和 https://github.com/kyleamathews/typefaces - Kyle Mathews
感谢@KyleMathews！我已经采用了omitGoogleFont建议。我同意webfontloader解决方案会更好。我正在尝试使用它，并能够在gatsby-ssr.js中导入脚本，但是当我尝试添加另一个带有配置的<script>标签时，它会抛出错误。我认为这与此问题有关：https://github.com/gatsbyjs/gatsby/issues/3722 - dougmacklin
显示剩余2条评论
1个回答
4
您可以尝试使用font-display:swap以获得更好的效果。不幸的是，Google托管字体目前还不支持此功能，因此我选择使用typeface-* npm包 来自主托管我的字体，这些字体由Kyle创建，他也是Gatsby的开发者之一。
这样做还有助于您的应用程序在没有互联网连接的情况下更好地运行，因为您正在使用Gatsby并且可能会添加离线插件。一些国家甚至可能禁用谷歌。
如果您也在使用typography插件，这里是从Qards中提取的示例配置代码：
import Typography from "typography";

let bodyFontFamily = ["Roboto", "Helvetica", "Arial", "sans-serif"];
let headerFontFamily = bodyFontFamily;

const typography = new Typography({
    baseFontSize    : "16px",
    baseLineHeight  : 1,
    omitGoogleFont  : true,
    headerFontFamily: headerFontFamily,
    bodyFontFamily  : bodyFontFamily
});

export default typography;

gatsby-browser.js:

exports.onInitialClientRender = () => {
  require("typeface-roboto");
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接