Auto Light Dark Light moss Dark moss
Home Digital garden Google fonts hate her, speed up your website with this one weird trick!

Google fonts hate her, speed up your website with this one weird trick!

Budding

Parody of an old school clickbait web ad with the text “GOOGLE FONTS HATE HER! Speed up your website With this one weird trick! LEARN THE TRUTH NOW”

Jokes aside, I have spent a fair amount of time and effort figuring out how to improve my font situation.

Like many others, my “font setup” consisted of these three lines:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0;0,9..144,100..900,0..100,1;1,9..144,100..900,0..100,0;1,9..144,100..900,0..100,1&family=Nanum+Pen+Script&family=Noto+Color+Emoji&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap">

After far too long, I finally thought I ought to spend a bit more time and effort to turn my “font setup” into an actual font setup.

What I did

I went to the URL from the link tag above:

https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0;0,9..144,100..900,0..100,1;1,9..144,100..900,0..100,0;1,9..144,100..900,0..100,1&family=Nanum+Pen+Script&family=Noto+Color+Emoji&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap

It’s a CSS file with a bunch of @font-face declarations, here’s an example:

/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/fraunces/v26/6NUV8FyLNQOQZAnv9ZwIlOkuy91B.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

I then went to the src URL to download the font:

https://fonts.gstatic.com/s/fraunces/v26/6NUT8FyLNQOQZAnv9ZwNpOskzP9Ddt0.woff2

As you can see, there is a comment above the @font-face rule, that tells us that this is a subsetted version of the font file that only includes the Latin Unicode characters. For my site, I only needed the latin subset, if you need more you should also get the other subsets you need.

I then copied the @font-face block over to my fonts.css file and updated the src URL to the location I’m storing the font.

@font-face {
font-family: "Fraunces";
font-display: swap;
font-weight: 100 900;
src: url("/assets/fonts/Fraunces--latin_basic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Then I repeated that for the rest of the fonts I’m using:

The other one

Except for Nanum Pen Script, because I only use 5 characters (<, e, /, y, >) from it’s Google Fonts’ subset was still going to be far too big for my needs.

So I had to pull out the big guns: