5 Google Font Combinations That You’ll Fall in Love With

It’s no secret that the days of custom web fonts have been around for a while. What started out by Typekit and Adobe is now being finished by Google.

There is a lot of buzz going on these days with web design and custom fonts, and more than likely you’ve seen some typography that you’d die to use. Some of these are paid fonts, which you might want not want to spend money on.

In walks Google Web Fonts – and all of your miseries (like mine) go away. Below you will see 5 examples of Google Font combinations you should start using.

1. Montserrat and Neuton

Montserrat and Neuton Google Fonts Combination

2. Roboto Slab and Roboto

Roboto Slab and Roboto Google Fonts Combination

3. Lato and Merriweather

Lato and Merriweather Google Fonts Combination

4. Playfair Display and Open Sans

Playfair Display and Open Sans Google Fonts Combination

5. Oswald and Quattrocento

Oswald and Quattrocento Google Fonts Combination

Loading Google Fonts

If your website is powered by the Genesis Framework and would like to add Google Fonts, the process is extremely simple. Trust me, it really is.

Below is the code you should use to properly add Google Fonts:

Discussion Time

I currently have a font crush on Neuton, which is what I’m using here on my website for the headings. It’s also being used on the Remobile Pro theme, which should be available over at StudioPress within the next few weeks.

So which Google Fonts are you using on your website? Do you like any of the Google Font combinations that you see above in this post?

Let’s talk about fonts in the comments below.

Get the Good Stuff

If you're interested in web design or the Genesis Framework, here's where you take the next step in growing your business. I'll be writing about my experiences with these topics.

Sign up for immediate access to the following:

  • Genesis Simple Share Plugin
  • Minimalist Theme for Genesis
  • Mobile First Theme for Genesis
  • Quote Graphic PSD

You will also be notified every time I publish on my blog.

Want to get FREE content? Click here to register.

Comments

  1. says

    I’ve not yet updated a functions.php file. Are you saying do not include the opening php tag because you would be adding that code to a section that already had the opening php tag?

    • says

      I’ve not yet updated a functions.php file. Are you saying do not include the opening php tag because you would be adding that code to a section that already had the opening php tag?

      The opening php tag is simply there for GitHub’s sake — not for anything else. Just start with the line that has //* Load Google Fonts.

  2. says

    I got hooked on Lato because of Studiopress and love how simple yet powerful it can be, especially on images. I never looked at Playfair Display before. I think I have a new font crush on that one!

    Going to play with that one right now! Thanks Brian!

    • says

      I’m trying my best to develop themes that don’t use Lato, mainly because I feel like I’m starting to overuse it. If you take a look at my homepage, you’ll see that the & (ampersand) is using Playfair Display.

      • says

        I noticed Lato was slowly being fazed out by you. I really like it for images more than anything right now. I still use it in Themes, mainly because I am too lazy to change it out. HA! Time to expand and look at other options and thanks to you I have a good head start! I am implementing PlayFair Display right now on a theme in progress.

  3. says

    I’m a bit of a font obsessive – it sometimes seems like the longest part of the design process when I’m agonising over which font combination to choose. Two I’ve enjoyed employing are Raleway for titles and headings – it’s modern, but letters like the ‘w’ give it a classic feel – with Cabin as the body font (which seems about the closest Google Fonts has to Gill Sans, I font I love). More recently, I used Patua One for titles and headings, with an unusual choice of the quite narrow Oswald font for body text – though only at font weight of 300, as it’s normal state is quite thick. Turned out rather stylish!

  4. Grace says

    I like Roboto Slab combined with Open Sans. Roboto Slab is a good solid face, as opposed to Playfair Display. Playfair Display has a lovely ampersand, but the letters have too many thin areas, so I think its readability is not as good as Roboto Slab.
    For Sans Serif headers I like Oswald for its condensed letters, but not with Quattrocento for text. I’d rather see it with Merriweather’s gentle suggestion of serifs. I love typography – a fine art!

  5. says

    I did feel so smart to be able to add these fonts. I’ve found that changing can make such a difference in how they read, especially when over an image.

    I’ll be looking forward to the new theme. Have been having too much fun with 411 pro (learning how to arrange things with navigation without sidebars). I’m using it too much, probably.

  6. says

    Funny, I try to avoid Lato now too for the same reason, but it really is a fantastic heading font.

    I recently went through all 650+ Google fonts to see if I could find one that came close to Proxima Nova and the winner was Istok Web. Give that one a try for block text between 15-17px. It’s NOT an equally good heading font however.

  7. says

    You’ve listed some of my favorite serif fonts: Merriweather and Playfair Display. So I’m happy.

    Thanks for Quattrocento, great serif for sites with an older audience and thus focus on higher readability need than some serif which still look small at 18px.

    I am also a fan of Poly, Lora, and Gentium Basic. All work fine with a nice sans-serif for titles. Oswald or Lato come to mind. I like Gentium Basic very much because it pushes a little beyond the ‘font lovers would not notice what it is’ category Merriweather and Poly fall in (IMHO).

    My personal favorite combination though is Effra for titles and Keppler Std for content. Sadly enough they come at a price or with Adobe Creative Cloud account.

    • says

      Addendum: Love Playfair Display’s ampersand but somehow I still stick with Baskerville for the ampersand.

      I think the craziest font I’ve ever used on a site, just because I could, was Linden Hill. Especially for large size quotes and references on home pages. Or maybe it was Riesling, but it was for a wedding photography site so I guess that doesn’t truly count.

  8. says

    Oooh! I’m going to have to play with the Playfair Display font! Pretty. Although, after reading the comments maybe it is a bit thin…

    On a side note, I love how your comment box is formatted. So simple and condensed.

  9. says

    I’ve been in love with Roboto Slab & Roboto since January. They have definitely been my longest running go to fonts in quite some time. Open Sans is another good one, but I love the ampersands in Playfair Display & Alice too. I probably could go on and on about fonts — I’m definitely a font addict.

  10. says

    Love Playfair Display! I’ve also enjoyed using Lato on my StudioPress themes. Great combinations, Brian. Font choices are, as you know, more important to the feel of a site and ease of reading than folks often give them credit for. Power to the font!

  11. Wayne says

    Brian, fantastic combinations. The new theme launching next week looks fantastic as well. As far as TypeKit is considered. Do you consider it a worthwhile purchase?

      • Jackie D'Elia says

        Brian, I really like the font choices you made on Unfiltered.me, freight-text-pro from Typekit. Elegant and so easy on the eyes to read – like a favorite book with large print. That same typeface is used on your post titles there and just works. Interesting that a serif/serif combination works so beautifully there.

        Seems that most web font pairings recommend a serif/san-serif combination.

        I wonder how readers would prefer to read post content using a serif font?

  12. says

    I love that first combo you put up.

    Currently I’m digging IM Fell DW Pica & Sorts Mill Goudy – just used on a project here: http://emilyhackett.com/. Like it so much I’ll probably be going a similar route on my own redesign. Always been a sucker for The Fell Types.

    Haven’t played around with Typekit much myself, but sounds like i’m missing out.

  13. says

    Currently using only Lato. Redesigning my site as I type this and going to use Montserrat for headings but have not decided on a body font yet. So seeing these fonts in action is a good thing for me.

    Thanks for the tip!

  14. says

    Many moons ago, I worked for an excellent boss who taught me all about fonts on (wait for it) QUATTRO PRO. Yep, if you’re old enough to remember it, you love font / graphics too. What he taught me was the feeling and movement of fonts. I’ve been hooked ever since.

    Brian, I like your practical combinations. Font need to be readable (especially for those of starting to need reading glasses). These are pretty modern However, can you recommend some more flowery combinations?

    P.S. Waiting for your newest theme and hope to use it for my new company website ..woot!! How did you know just what I was looking for?

  15. Ahmad Fahrurroji says

    Hi Brian,

    I like with Roboto Slab/Roboto, Open Sans and Oswald for my web project. And It’s really easy to use Google Fonts on Genesis Framework.

    Thanks for sharing.

  16. StephenB says

    Another nice combo from Google fonts is Monserrat & Cardo. Sans serif Monserrat for headlines, serif Cardo for body / text.

    Is this theme going to be another studiopress release? Quite nice.

    S

  17. Scott Buehler says

    Oswald headings and Droid Sans body for me. I just love the pairing. Fell in love with Droid Sans from a previous Genesis theme. It’s awesome to compare everyone’s favs here, definitely fun to check them out.

Leave a Reply

Your email address will not be published. Required fields are marked *