DEV Community

Deniz Akşimşek
Deniz Akşimşek

Posted on • Originally published at on

Eleventy — Dynamically Inlining Google Fonts

When you add Google Fonts to your website by copying the link from the 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!

Top comments (1)

harveyramer profile image
Harvey Ramer

This results in code that loads webfonts beautifully on Mac, but not on Chrome IOS or Windows. I think Google loads OS aware code.