Google Font Explorer

code • July 3, 2013

Update 9/12/2013 I received many requests on CodePen to make this pen its own page. So here is the Google Font Explorer!

See the Pen Google Font Explorer by Katy DeCorah (@katydecorah) on CodePen

I love using Google Fonts. I know webfonts are a killer for web performance, but I can’t help myself. I tend to start designing something based on the font. I use ems as a unit for measure and for dictating proportions in my design. Call it process, call it whatever, I just love a good font.

I am not a huge fan of the Google Font interface. For example, I never feel like I can accurately preview a font. I find myself having to try on different fonts on actual text outside of Google Fonts like I’m in a dressing room.

I created the Google Font Explorer to find new fonts and test them out a little more accurately.

I’m tapping into Google’s Font API to access all the font families data. You can type in a family to try it out. I used Bootstrap’s typeahead to help you find the font as you type. You can also click the randomize button to view a totally new font. You can edit the dummy or use the lorem ipsum text provided. Find out more about the family by clicking the information button. I also provided a history list in case you want to go back to a family you viewed before.

Keep reading code

Older Newer