Google Font Explorer

code | July 3, 2013

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

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

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.

Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.