DEV Community

Cover image for Make all of your Google Fonts SCREAMING fast
Adam McGurk
Adam McGurk

Posted on

Make all of your Google Fonts SCREAMING fast

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

Discussion (10)

Collapse
spiritbro1 profile image
spiritbro1

is it license free?

Collapse
mcgurkadam profile image
Adam McGurk Author

Is what license free?

Collapse
spiritbro1 profile image
spiritbro1

are google fonts license free of use for commercial?

Thread Thread
mcgurkadam profile image
Adam McGurk Author

Yes they are!!! Super nice to use!

Collapse
reedjones profile image
Reed Jones

Interesting! I have read that csswizardry article before, I'll have to try this out. Thanks for sharing!

Collapse
mcgurkadam profile image
Adam McGurk Author

Thank you for reading!!! It really does shave so much time off if you use it!!

Collapse
vtrpldn profile image
Vitor Paladini

Now I cannot help but imagine my laptop speakers going "AHHHHHHH!" whenever a Google Font is loading πŸ˜‚

Collapse
mcgurkadam profile image
Adam McGurk Author

YES! Then it worked πŸ˜‚ πŸ˜‚ πŸ˜‚ πŸ˜‚. πŸ˜‚

Thanks for reading!

Collapse
annietaylorchen profile image
Annie Taylor Chen

I usually download them and host them in fonts folder in my own project... do you use direct link to googlefonts?

Collapse
mcgurkadam profile image
Adam McGurk Author

This is for people who do use that direct link. Self hosting it is great for perf too!!