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?

dougmacklin
  • 2,560
  • 10
  • 42
  • 69
  • 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](https://github.com/typekit/webfontloader) – jaegs Jan 25 '18 at 18:25
  • 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. – dougmacklin Jan 26 '18 at 19:32
  • I think Google Fonts does have a similar capability using Webfont Loader (it was apparently jointly developed by Google and TypeKit): https://www.npmjs.com/package/webfontloader – Eric Johnson Jan 29 '18 at 14:52
  • 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). – dougmacklin Jan 29 '18 at 18:36
  • I'd love a PR adding support for webfontloader to gatsby-plugin-typography. – Kyle Mathews Jan 29 '18 at 18:39
  • Another option is to use this new option recently added to swap out google fonts w/ fonts from Typefaces https://github.com/gatsbyjs/gatsby/pull/3621 & https://github.com/kyleamathews/typefaces – Kyle Mathews Jan 29 '18 at 18:40
  • 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 ` – dougmacklin Jan 30 '18 at 19:16

1 Answers1

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");
};
Romeo Mihalcea
  • 9,714
  • 12
  • 50
  • 102