When using react-typography, replace Google Fonts CSS w/ css font-face declaration

[KyleAMathews]

This saves the extra request to Google Fonts to grab the CSS file which can significantly delay starting the download of the fonts.

Google Fonts doesn't recommend this as they want you to always be grabbing the latest versions of fonts but if you regularly rebuild your site then you'll generally be up-to-date.

This might be better actually as a Gatsby plugin. It'd be an HTML post-processor — it'd scan HTML for google font css strings and replace them with the font-face declarations.

[KyleAMathews]

From this load — it looks like making this change would speed up loading custom fonts by ~2-300 milliseconds.

[KyleAMathews]

Another idea is to publish open source fonts (e.g. those on Google Fonts) to NPM along with font-face css and then you can just include the font-face css in your webpack project.

Looks like there's all the convertor code we need on NPM https://www.npmjs.com/package/fontmin

[KyleAMathews]

Including a subsetted version (e.g. a-z1-9) version could be cool too to inline in the head ecomfe/fontmin#10