10 More Great Google Font Combinations You Can Copy

by on 20th March 2012 with 43 Comments

screenshot

The last time we wrote about Google Web Fonts, it was a fairly new program with a handful of fonts. Today there are nearly 500 font families ready and waiting to be served up to your website completely free of charge. Google has certainly made its mark on web typography and stands as an excellent alternative to premium subscription services.

The downside of this growth is that it’s becomingly increasingly difficult to sift through the library to find the best selections. We’ve got your back though and are serving up another great collection of Google Web Font combinations ripe for the stealing. Just copy and paste our code, then tweak the style to fit your needs and you’ll be good to go!

Bree Serif & Open Sans

screenshot

The HTML



The CSS

h1 {
  font: 400 60px/1.3 'Bree Serif', Georgia, serif;
}

p {
  font: 400 14px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;
}

Bevan and Pontano Sans

screenshot

The HTML



The CSS

h1 {
  font: 400 60px/1.3 'Bevan', Georgia, serif;
}

p {
  font: 400 16px/1.6 'Pontano Sans', Verdana, Helvetica, sans-serif;
}

Abril Fatface & Average

screenshot

The HTML



The CSS

h1 {
  font: 400 60px/1.3 'Abril Fatface', Georgia, serif;
}

p {
  font: 400 17px/1.6 'Average', Garamond, Georgia, serif;
}

Playfair Display and Muli

screenshot

The HTML



The CSS

h1 {
  font: 400 60px/1.5 'Playfair Display', Georgia, serif;
}

p {
  font: 400 16px/1.6 'Muli', Verdana, Helvetica, sans-serif;
}

Sansita One & Kameron

screenshot

The HTML



The CSS

h1 {
  font: 400 70px/1.2 'Sansita one', Georgia, serif;
}

p {
  font: 400 17px/1.6 'Kameron', Georgia, serif;
}

Istok Web & Lora

screenshot

The HTML



The CSS

h1 {
  font: 400 70px/1.2 'Istok Web', Verdana, Helvetica, sans-serif
}

p {
  font: 400 16px/1.6 'Lora', Georgia, serif;
}

Pacifico & Arimo

screenshot

The HTML



The CSS

h1 {
  font: 400 95px/1.6 'Pacifico', Georgia, serif;
}

p {
  font: 400 16px/1.6 'Arimo', Verdana, Helvetica, sans-serif;
}

Nixie One & Ledger

screenshot

The HTML



The CSS

h1 {
  font: 400 80px/1.2 'Nixie One', Georgia, serif;
}

p {
  font: 400 15px/1.6 'Ledger', Garamond, Georgia, serif;
}

Cantata One & Imprima

screenshot

The HTML



The CSS

h1 {
  font: 400 70px/1.2 'Cantata One', Georgia, serif;
  color: #2f99ba;
}

p {
  font: 400 16px/1.6 'Imprima', Verdana, Helvetica, sans-serif;
  width: 480px;
  color: #232525;
}

Rancho & Gudea

screenshot

The HTML



The CSS

h1 {
  font: 400 95px/1.1 'Rancho', Georgia, serif;
}

p {
  font: 400 17px/1.6 'Gudea', Verdana, Helvetica, sans-serif;
}

Conclusion

Hopefully, you’ve found several font combinations here that will work perfectly for some of the projects that you’re working on. Be sure to bookmark this page and come back the next time you need some ideas. If you’re interested in some of the logic behind how to pair fonts, check out our first article in this series.

Do you have any great Google Web Font combinations that you’d like to share? Leave a comment below and let us know! Also be sure to link to any live examples where you’ve use Google Web Fonts.

Other Posts in Google Font Combinations:

Comments & Discussion

43 Comments

Comments & Discussion

43 Comments

  1. Irene says:

    Thanks, very helpfull post. I always use google fonts for the websites I create and I will try one of the combinations you suggest (Playfair Display and Muli. It seems just right for what I am working on at the moment. :)

  2. Thanks for another interesting and informative article. It’s always interesting to see what others choose for font combinations. I used Rancho with Muli on a project recently which also works well.

  3. Wbase says:

    Hi good morning,
    We Wbase Web design company in Barcelona, Madrid and wanted to thank you for all the information you have provided and congratulate you for the article, the truth is very good.

    Thank you very much,

    regards

  4. Ankur says:

    Good choice. I am implementing one of these combinations on my site

  5. Nerith says:

    Thanks for this interesting article! I love Imprima and Gudea!

  6. Norvik says:

    Thanks for the list :) I like the Bree Serif & Open Sans fonts.

  7. Jimmy says:

    Great resource, thanks!
    I’m always looking for good font-combinations to use, definitely bookmarking this.
    I found Questrial to be another great font for body text, and blends seamlessly with any other!

  8. Jimmy says:

    Oops! Sorry, forgot to close that anchor tag!

  9. Thanks for the share, really liking Pacifico & Arimo fonts.

  10. Nimsrules says:

    These are beautiful fonts, I’ve currently incorporated ‘Ropa-Sans’ on my blog and it looks fabulous.

  11. Skatox says:

    Great post! Especially for back-end developers with bad test for fonts. (like me XD)

  12. Joshua Lewis says:

    Nice but it strikes me as very light on any substantive or useful information.

    Just dropping the HTML/CSS code for people to copy and paste missed a giant opportunity to explain why each font size, line-height, and font-stack, was chosen.

    A brief description (1 paragraph even) for each font, why it works well with its selected partner, indication of where each is strong and weak, and pointers on use would have made this article truly useful and informative.

  13. I’m just re-doing my site so this post has come just at the right time. I always get a little overwhelmed at the choice of fonts on Google so thanks for narrowing it down a little for me.

  14. Toby says:

    Love the font combinations. It really can be a case of digging through the scraps to find a few gems with Google fonts and you’ve saved me some of the work!

    Many thanks again for a great post.

  15. Ted says:

    Thanks a lot! Bree Serif and Open Sans look amazing together.

  16. Web Mentor says:

    LOVE that you guys made this post. Mixing typography can be damn hard and people put tutorials on how to do buttons, this effect, that effect, but they forget the most powerful, how to make good font combinations. Can you do more but with Typekit or so?

  17. Paul says:

    Awesome thanks for these I’m going to have a play around with some other combinations.

  18. Reinhard says:

    Great Job! Thank you for that great font combinations!

  19. Wonderful post i love the idea

  20. Arun Sharma says:

    it very help full for us thanks

  21. Chip Cullen says:

    I just found this article, and though your readers might find this tool I built interesting:

    http://font-combinator.com/

    It allows you to quickly try out different font combinations, and is based on Google Fonts.

  22. Bryan says:

    Thanks! Very nice set of fonts!

  23. Helene says:

    I like several of the fonts. Can you use it in WordPress, and where do you insert the html? (If you want the menubar-fonts changed)

  24. Nice Article. Great Font combination. My Only worries are we will have a hit or two on google for our web pages.

  25. fii says:

    very excellent list, many thanks

  26. Paul Santosh says:

    Wow.. Awesome font combinations. I like the first one most.

  27. This article doesn’t match with the title. It must be “10 AWESOME Google Fonts Combination”!

    Thank you for the inspirations.. :D

  28. Matt Styles says:

    Awesome combinations.

    I’ve just thrown Paytone One (headings) and Arvo (body) together to punchy results!

    I too would of liked a quick explanation on why you chose each combo like you did with the first post.

  29. Carlos says:

    Thank you so much!

  30. TheloniusMonk says:

    How are these fonts rendering on windows for y’all?

    On Ubuntu and Mac they are coming up a treat, but on windows xp even with cleartype enabled they are sucking azz! Jagged font edges and all… Windows sucks ballz. I said it…

    Wondering how this these are coming up in windows 7. Anybody care to share?

    Regards.

  31. TheloniusMonk says:

    These are killa combos by the way :-]

  32. Chris Savage says:

    Thanks for sharing these great combos. I love fonts from Google and especially cause they are free, but they can be very difficult to sift through at times. I really hope the update their site to make it easier to find good font combos.

  33. diana says:

    Love it!! Great posts. “Pair two fonts wisely” was a piece of life advice that has served me well in more situations and tasks than I can begin to count. I’ve scrutinized the pairing of fonts ever since. So satisfying to find a great combination!

  34. Erik says:

    Cool combinations. Just what I was looking for. Working on a redesign of my website right now, gonna try some combinations.

  35. Neel shah says:

    Awesome fonts used them! thanks

  36. Forrest says:

    Next time you write a post, you might want to consider things like not putting the word “Helvetica” in seven times if it has nothing to do with the post (ie you’re not showing a single webfont that’s simliar to Helvetica.) Otherwise people like me find the post only to be disappointed.

  37. Web dizajn says:

    Wow so great combinations…Love it!

  38. The last one was good! This one is frankly even better. Thanks DesignShack.

    These are some great combos. Unique ones too!

  39. Chuck Rayman says:

    Thanks for sharing. Great post and awesome font combinations!

    Personally, I like Istok Web & Lora.

    Best,

    Chuck

  40. Miguel K says:

    Thanks a lot! This is going to be a permanent source for me

  41. Hal says:

    Very nice combinations! I have a question about Google web fonts and font stacks — Is there really a need for using both? If you use a Google font correctly, it should work for everyone, right? So is the font stack needed? Won’t the first font (Google Font) be used and the others in the stack always be ignored?

Leave a Comment

Subscribe
Membership
About the Author