1. Web Design
  2. Community Projects

CodePen Challenge #3: Favorite Google Font Pairs

Another month, another CodePen Challenge! Last time we asked you to style a signup form and a whopping 68 of you took part. This time we want to see which Google font combinations you recommend–the best examples will be showcased in a week or so!

The Challenge

We want you to flex your typographic muscles and show us which Google font pairs you think work best! Fancy a bit of Lato with some Merriweather? Does Unica One with Vollkorn make you drool? 

Take the pen we’ve prepared and treat it with two Google fonts. Apply the fonts in any way you like; you may need to tweak other typographic styles such as line-height, font-size and letter-spacing, plus you can change the colours if you feel it improves the personality of the type you’ve used. 

Just don’t touch the markup!

Over to You

Here’s what you need to do, in a few dead easy steps.

Step 1

Firstly, head on over to the demo on CodePen. You might recognise it as the first page to be published on the world wide web by CERN. This is what it looks like:

Step 2

Hit the Fork button to create your own copy of it, then make as many changes as you want to the CSS.

The quickest way to make use of Google fonts is to import them directly. Grab the relevant @import snippet from Google:

Then paste it into the CSS panel on CodePen to use it in your styles:

Step 3 (Optional)

If you’re signed into CodePen you can edit the description by hitting the Info button. Use this to give folks an idea of what you’ve done.

Step 4

Hit Save, you’re done. Be sure to let us know in the comments when you’ve finished–and feel free to let us know by tweeting us @wdtuts as well.

That’s it! All entries will be added to this collection on CodePen and the best examples will be showcased on Tuts+ in a week or so!

Good luck and don’t forget to follow Tuts+ on Codepen!


Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.