Add Google font imports (Gatsby)

[mikeesto]

The live website uses a handful of Google fonts. These are also used in the Gatsby site but they are not currently imported, as seen below:

This PR imports the fonts!

[saihaj]

Hey 👋🏼 thank you for bringing this up. I forgot about the fonts. I think instead of importing them in our css files we should prefetch fonts using gatsby-plugin-prefetch-google-fonts

[mikeesto]

@saihaj Yes, that's what I originally planned to do but I couldn't work out if it's still being maintained. The one you linked to is archived: https://github.com/escaladesports/legacy-gatsby-plugin-prefetch-google-fonts and the link to its supposed new home gives me a 404.

[saihaj]

This looks like a community fork of that package. https://www.npmjs.com/package/@el7cosmos/gatsby-plugin-prefetch-google-fonts
Do you think we should use this instead? Or should we write something ourselves?
cc @IvanGoncharov

[carolstran]

Popping in hi 👋🏼 The community fork looks like the option for this case if we want to prefetch the fonts. But what's the performance difference between prefetching via a plugin and importing the fonts? If it's not a big difference, then we could always implement the proposed changes now and open a separate issue to look into the best plugin for prefetching so that it's not a blocker.

[carolstran]

By the way, thank you so much for picking up some of these Gatsby issues @mikeesto - you seriously rule! 🥳

[mikeesto]

Thanks @carolstran 😊 Although I feel like I've barely done anything!

Unfortunately I haven't had much luck with either the fork or the original plugin. Both give this error when trying to load the Rubik font: Error: ENOENT: no such file or directory, stat '.cache/google-fonts//fonts'. I found an open issue about it in the original repo. I wasn't able to find any alternative prefetching plugins. I'm thinking it's perhaps best to go with what we have for now, and look at prefetching options again in a few months time.

[carolstran]

Agreed! My vote would be to merge this solution and then open an issue about prefetching so that it's documented/not forgotten 😊 (pinging @IvanGoncharov to merge)

[IvanGoncharov]

Agree with @carolstran we can optimize performance in the next PR.

[carolstran]

Sweet! I created #932 as a future reference.