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:
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!