Eleventy — Dynamically Inlining Google Fonts
Update : I have learned since writing this post that this is a bad idea, since Google Fonts will serve different CSS based on the browser. If you want fast loading, vendor your fonts and use
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
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!