Have you ever stopped to think about the impact of the fonts you use on your website? Well, a few years ago, I did. And that’s when I decided to bid farewell to Google Fonts.
As someone who loves creating interesting and visually appealing websites, using stock OS fonts seemed like a step in the right direction. Not only does it make my sites load faster, but it also eliminated any concerns about Google’s potential tracking practices (which the EU has raised valid concerns about).
Last year I mentioned that I was swapping Google Fonts for Bunny Fonts. This was a great first step, but I’ve since gone further and removed Google Fonts from my web design toolkit altogether. Here’s why.
The Need for Speed and Privacy
We want our websites to load quickly and smoothly so that visitors can navigate effortlessly through our content. By ditching Google Fonts and relying on stock OS fonts instead, I found that my sites were noticeably faster.
And here’s an added bonus: by removing Google Fonts from the equation, I also eliminated any lingering worries about privacy and data tracking. With increasing concerns over online privacy and security issues, ensuring that your website doesn’t unintentionally expose visitors’ information is more important than ever.
Embrace Fallback Fonts
“But what if the font doesn’t exist on a visitor’s device?” This is where fallback fonts come into play.
By carefully selecting good fallback fonts for your website design, you can ensure that even if a specific font isn’t available on a user’s device or browser, your site will still look visually pleasing across various platforms, albeit not entirely the same.
Embrace Browser Differences
When I worked in the corporate world there was a lot of emphasis on making websites “look like the mockups”, but this simply isn’t realistic. Trying to achieve pixel-perfect consistency across all browsers can be a never-ending battle.
Instead of worrying about minor visual discrepancies, I prefer to focus on creating a user-friendly and engaging experience. I would much prefer a fast loading website that gets users the information they want as quickly as possible, to one that has exactly the same font everywhere. After all, as long as your content is accessible and well-presented, a slightly different rendering of fonts on various browsers won’t actually change anything.
Leveraging ElementalCSS Framework
Now, you might be wondering how exactly I managed to make this transition away from Google Fonts while still maintaining beautiful typography on my websites. Well, let me introduce you to my secret weapon: the ElementalCSS framework.
I’ve mentioned this a couple of times recently and I will probably keep doing that cos I love it and it makes building websites so much quicker.
ElementalCSS is a CSS framework that does “just enough”, and part of this includes having a bunch of CSS font stacks that don’t require Google Fonts.
So there you have it – my personal journey of removing Google Fonts from my web design toolkit. By embracing stock OS fonts, ensuring proper fallback options, embracing browser differences without losing sleep over them, and leveraging frameworks like ElementalCSS, I’ve been able to create visually captivating websites that load quickly and respect users’ privacy.
Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.