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.
A JavaScript data file
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.
<style type="text/css">{{googleFontsStylesheet|safe}}</style>
Enjoy your improved Lighthouse scores!
Top comments (1)
This results in code that loads webfonts beautifully on Mac, but not on Chrome IOS or Windows. I think Google loads OS aware code.