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.
// _data/googleFontsStylesheet.js 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!