Question

我使用Gatsby.js及其Typography插件使用Irving theme。

此主题需要Google字体"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配置为仍然使用这些字体而不单独导入它们？

Answer 1

使用font-display:swap可能会获得更好的结果。不幸的是，Google托管的字体尚不支持此功能，因此，我选择使用typeface-* npm package来自托管字体，该字体由Kyle也是Gatsby创建。

这也可以帮助您的应用程序在没有互联网连接的情况下更好地运行，因为您正在使用Gatsby，并且可能会添加离线插件。一些国家甚至可能禁用了Google。

如果您还使用了排版插件，那么以下是从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");
};

Gatsby.js：在没有渲染阻止的情况下为版式主题加载Google字体

1 个答案: