Streaming live at 10am (PST)

My Webflowed Google Font Tool


#1

Hellu!

You've problably spent, if not enormous time, so at least a lot of time choosing what font you're going to use for your new website project. Instead of viewing Googles own Font library page, where you only can see heading and paragraph separately, I decided to do my own site there you can see them combined.

I've gone through the entire Google Font directory and selected the ones that I feel either have a great readability or because they look cool...or combined.

I've came across sites like Typecast, where you can compare fonts for your headings and paragraphs. But I think its a bit too messy.

This "website tool" I've made is über-easy to use. Basically you browse the fonts on the right, find one you like, click on it, note it's name and then heading over to the "Test Area" where you just apply the class name of the font to one of the elements you want to use. Voila! Makes font matching clean-darn easy!

The Test Area is usually set up like this:

H1
Paragraph
H2
H3
H4
H5
H6

Same goes for the "Browsing section" of San Serif, Serif, Slab Serif and Monospace, but some fonts, like Display and Handwriting fonts are clearly not intended to use in paragraphs, so they are a bit stripped.

Take a look at the site here: https://webflow.com/website/google-font-gallery?s=google-font-gallery

Feel free to clone!


#2

I haven't tested in on smaller screens like 13" and so..but it should work fine! I'm going to test i someday, and make changes if needed.

And of course this is only for Webflowers and can only be used within the Designer!

Enjoy.


#3

Nice! lot's of work no?

Lately I'm looking for sites like this, that help you chosing, an pairing the fonts. I found these:

http://fontpair.co/
http://femmebot.github.io/google-type/

The other thing I'm looking to is to see all wieghts of a font at the same time. i like to chose two fonts to design with, and play with the weights. That's why I'm still using Proxima Nova a lot, so many options for weights.


#4

Yes, it was! But I've been doing it little by little the past months.

Well, the con with those sites are that you got a fixed set of pairing. The pairs are already there. With my tool you got a total freedom to match and mix any font you want that are listed inside the tool. However the sites adds more context to font matching by having visual images aswell...which also add to the decision of font. I might look into making something like that...a few divs or something with nice images.


#5