Login/Register
Gatsby.js: Load Google Fonts for Typography themes without Render-Blocking
Asked Answered
typographygoogle-font-apigoogle-pagespeedgatsbyrender-blocking
D

1

10

I'm using Gatsby.js and its Typography plugin with the Irving theme.

This theme requires the Google Fonts "Exo" and "Yrsa", and adds an import to the <head> section of the exported static html files:

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

This import is render-blocking content and I'd prefer to avoid it if possible for both users and my Google PageSpeed Insights score.

I tried using gatsby-plugin-google-fonts and added the following to my gatsby-config.js:

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

However this just adds a second import call. Should I be placing them in the static directory? Even then, how can I configure Typography to still use these fonts without importing them separately?

Decemvir answered 22/1, 2018 at 18:6 Comment(7)
They are linked in the head to help avoid FOUT. Google's optimized servers are most likely your best bet for serving your users those fonts. However, if you prefer speed over style than you can either ditch those fonts from your theme altogether or try TypeKit's Web Font Loader – Representational
I agree that eliminating FOUT is a priority. Typekit loads asynchronously and allows you to prevent FOUT by hiding content until the font is ready by setting display: none; on the .wf-loading class. This is a pretty simple solution, I guess I just wish Google Fonts had a similar capability. – Decemvir
I think Google Fonts does have a similar capability using Webfont Loader (it was apparently jointly developed by Google and TypeKit): npmjs.com/package/webfontloader – Dusky
Thanks, that does look promising! Correct me if I'm wrong, but we'd still need a way to prevent Gatsby + Typography from adding the regular font import tag, however, or else we're still render blocking and attempting to import the same font twice (once synchronously and once asynchronously). – Decemvir
I'd love a PR adding support for webfontloader to gatsby-plugin-typography. – Lithiasis
Another option is to use this new option recently added to swap out google fonts w/ fonts from Typefaces github.com/gatsbyjs/gatsby/pull/3621 & github.com/kyleamathews/typefaces – Lithiasis
Thanks @KyleMathews! I went ahead with the omitGoogleFont suggestion. I agree the webfontloader solution would be better. I am playing around with it and am able to import the script in gatsby-ssr.js, however when I try to add another <script> tag with configuration, it throws an error. I think it is related to this issue: github.com/gatsbyjs/gatsby/issues/3722 – Decemvir
C
4

You might get better results with font-display:swap. Unfortunately Google hosted fonts do not support this feature yet so, instead, I went for self-hosting my fonts using the typeface-* npm package which are created by Kyle who also does Gatsby.

This also helps your app work better without internet connection since you're using Gatsby and you might add the offline plugin. Some countries might even have google disabled.

If you're also using the typography plugin here's the sample config code extracted from 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");
};
Campman answered 12/10, 2018 at 19:47 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.