Make all of your Google Fonts SCREAMING fast

#webdev #showdev #css #beginners

I think we all know that one of the parts of building web pages that impacts performance the most is loading web fonts. That's long been a pain for a number of reasons - foremost because web fonts are often the cheapest, fastest way to get a good-looking type on your webpage.

With that convenience comes a price though...and that price is often one or sometimes even two seconds of load time on your web page.

At least...that was true until Harry Roberts of CSS Wizardry pulled out his magic wand and changed the Google Fonts game.

If you haven't read it, one of the most recent articles on CSS Wizardry is the best breakdown on performance of Google Fonts I've ever seen. Here's the link:

https://csswizardry.com/2020/05/the-fastest-google-fonts/

PLEASE read it if you care about web performance at all. It's a masterclass in what you can and can't do and a test from every conceivable angle on how to most optimize Google Fonts for speed.

And so immediately after I read it, I decided that in every web project I have, I'm going to replicate it. That's where I ran into a little bit of frustration.

It's four lines of code that you have to get exactly right or else it won't work at all. That's how tags in the HTML head work. And while the code is revolutionary, it's cumbersome to copy, paste, and replace the URL of your new font every time.

Enter https://optimizefonts.com/d/1/1

I finally decided I was just going to throw up a webpage where I could go, enter the URL to the font (or just the link tag) and it would give me back the code needed to optimize that font to the max.

No frills, no bells, no whistles. Completely free.

Go to https://optimizefonts.com/d/2/1 if you want to get the most speed you possibly can out of your Google Font.

Let me know how you all like the tool and if there's anything you would add to it! It's still very much a work in progress, so I'm very open to feedback!

Photo by Harley-Davidson on Unsplash