DEV Community

loading...

Eleventy — Dynamically Inlining Google Fonts

dz4k profile image Deniz Akşimşek Originally published at denizaksimsek.com on ・1 min read

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())
Enter fullscreen mode Exit fullscreen mode

And include it in our base layout.

<style type="text/css">{{googleFontsStylesheet|safe}}</style>
Enter fullscreen mode Exit fullscreen mode

Enjoy your improved Lighthouse scores!

Discussion (0)

pic
Editor guide