All in the name of Lighthouse scores.
When you add Google Fonts to your website by copying the link from the fonts.google.com website, you create a request chain. That is, after loading the HTML of your page, the browser then needs to request a bit of CSS from Google, and only then can it start loading the fonts themselves. A simple solution to this is to copy the CSS returned by Google and paste it into a
<style> element in your page. However, I like to change fonts quite frequently, and I’d like to automate this process. This is easy with Eleventy.
We simply fetch the CSS at build time.
const fetch = require('node-fetch')
const url = 'the URL in the Google Fonts stylesheet link href'
module.exports = fetch(url).then(res => res.text())
And include it in our base layout.
Enjoy your improved Lighthouse scores!