我正在使用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仍然可以使用这些字体而不必单独导入它们呢?
.wf-loading
类上设置display: none;
来隐藏内容,直到字体准备就绪,从而防止FOUT。这是一个相当简单的解决方案,我希望Google Fonts也有类似的功能。 - dougmacklinomitGoogleFont
建议。我同意webfontloader解决方案会更好。我正在尝试使用它,并能够在gatsby-ssr.js
中导入脚本,但是当我尝试添加另一个带有配置的<script>
标签时,它会抛出错误。我认为这与此问题有关:https://github.com/gatsbyjs/gatsby/issues/3722 - dougmacklin