Announcing: Google Font Tester

I'm the type of designer who sticks around in graphic tools only as long as they need to. This usually means I do a lot of exploratory design work in there, I diverge a lot, and move quite laterally so to speak, rather than explore a single theme in depth.

Once I get a feeling I am on to something—which is usually indicated by me not having the urge to design anymore—I know I am happy with the direction in general. When it comes to websites, this is when I move into code, and everything that I drew up until that point becomes deprecated. This includes copy as well, because most of my work revolves around copywriting, and typography as well. Writing is a huge part of my design process.

More often than not, I continue to dwell on my typography choices throughout the design process, well into the implementation phase. I tend to hold off on my final decision regarding typography until I can experience the website or an interface in the browser itself. This is when I am able to see the actual rendering, and figure out how well it scales, etc.

This means I need to go back into Figma, explore typographic choices, than implement these changes only to see it rendered in browsers. Implementing fonts—especially if you don't have to do any web font conversion—isn't a huge deal, but doing it for a couple of hours is not fun. For me at this point, this is tedium to a T.

Since it's been a while since I've designed a website and I have been doing so recently, I've discovered that my laziness has grown, and that I have no intention of hand-coding websites ever again. I also don't have the intention of trying out dozens of font versions and pairings through code. So I figured why wouldn't Claude make me a widget which will enable me to exercise basic typographic exploration directly on top of my live work, the website I am working on. And this is how Google Font Tester was born.

Google Font Tester

Sorry about the name, but feel free to check out the GitHub repo. which is where you will find all the details about how to use it.

With GFT you can:

• choose among 80+ popular Google Fonts
• filter by category: Sans, Serif, Display, Script, Mono
• search fonts by name
• target specific elements (defaults to body)
• set font weight
• set font size by entering any valid CSS value, but if you omit the value it defaults to px
• set line height from -0.5–5 via slider
• force !important to override existing styles when needed.

It also supports:

• live preview: changes apply instantly as you adjust settings
• lazy-loads fonts as you scroll for performance
• reset button to restore all original styles
• copy button to copy the CSS properties you changed (e.g. to send to your developer).

And it has zero dependencies, and has a cool bookmarklet so you don't even have to download anything and can use it on any website, not just yours!

It's been a long time since I've contributed an open source something to the world, and I am glad I am able to again, even if it is something as trivial as this. To me this is the positive side of AI, and where the enablement is reflected best for design work. Again, it's not about replacing people, it's about empowering them.

1

Error happened.