我正在使用 Gatsby.js和它的 Typography带有 Irving theme 的插件.
此主题需要 Google 字体 "Exo"和 "Yrsa" ，并将导入添加到 <head>导出的静态 html 文件的部分:
<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 以在不单独导入它们的情况下仍然使用这些字体？
最佳答案
使用 font-display:swap 可能会获得更好的结果.不幸的是，Google 托管的字体尚不支持此功能，因此，我使用 typeface-* 自行托管我的字体。 npm package由同样制作 Gatsby 的 Kyle 创建。
这也有助于您的应用在没有互联网连接的情况下更好地工作，因为您使用的是 Gatsby，并且您可能会添加离线插件。有些国家甚至可能禁用了谷歌。
如果您还使用排版插件，这里是从 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");
};
关于typography - Gatsby .js : Load Google Fonts for Typography themes without Render-Blocking，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48387721/