Like most web developers, Google Fonts is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is solved with just two lines of code.

Clicks and Conundrums

While Google Fonts is a valuable tool, its interface leaves much to be desired, a fact that hasn’t escaped the attention of folks like Laura Franz or Sascha Grief. As a devoted user of Google Fonts, I’d like to add a few of my own pet peeves to the conversation.

First, one of the most common ways people arrive on Google Fonts is through a web search. The page you’ll land on, while admittedly chock full of interesting history and statistics, doesn’t include the information you’re there for.

For that, you’ll need to click the “Open in Google Fonts” link in the top right. “I thought I was already on Google Fonts,” you might wonder.

Second, the Google Fonts interface is peppered with buttons, many unlabelled, that always give me a half-second pause. “Which one do I click to start using the font?” Hint: it’s not the bright blue button that beckons.

Finally, Google Fonts includes a lot of directions and tips that are useful for the first-time user, but after the 100th visit, only serve to waste space. Add fixed bars at the top and bottom of the page and you end up with the most crucial bits below the fold, maybe even buried in a hidden tab.

Enter FontCDN

Last week I tried my hand at building the Google Fonts interface that I wanted to use. The result is FontCDN.

FontCDN addresses a different use case than what Google Fonts seems to be designed for. Rather than deeply exploring and comparing different fonts within Google Fonts or within a prototyping tool like Typecast, the goal of FontCDN is to quickly grab the fonts you’re interested in and try them out within the context of your actual project.

You can sort and filter the 700+ fonts available on Google Fonts any which way. You can even browse fonts that have been recommended around the web, a feature inspired by Typekit.

Click a font to view the import and style code. Click a button to copy it to your clipboard. There’s no step three.

Give FontCDN a try and let me know what you think.

Reactions

Performance was a priority given how resource-intensive it is to browse hundreds of fonts, and using React was one of the keys. But given this is my first time using React, there are surely many more optimizations to be made. If you want help out, the project is on GitHub.

While it took some time to become familiar with React, and JSX resides in some kind of uncanny valley, the componentization and render methods made it worthwhile. So much so that when it comes time to revamp GlyphSearch, I’ll probably give it the React treatment.

On a final note, hat tip to WebPack, React Infinite, and Web Font Loader, which saved me a boatload of effort on this project.