10 Awesome Google Font Combinations

We all know that friend with the nice house – the house where you want to stay forever. It's the equivalent of a beachfront mansion with a fully-stocked fridge and fresh squeezed juices in little sipping cups lining the hallways. In the morning, model-esque butlers and maids walk into your room, open the silk curtains overlooking the sea, and hand you a heated robe, a freshly imported coffee, and your favorite book. Ah, this is the life.

The same psychology applies to the top 1% of websites in the world. When a designer takes care of the "little details" of a website, its visitors are more inclined to stay (i.e. read the content) and even share what they've read with others. Today, I want to work with you on one of the "little details" to create a better reading experience for your readers via Google Fonts. If you don't know how to install Google Fonts to your website, I've written a tutorial for complete beginners here, and you'll be up and running in the next five minutes.

Here are ten awesome font combinations you can use on your beachfront-mansion-of-a website; hover your cursor over each combination to view a light-on-dark example as well:

1. Lato and Merriweather

Lato & Merriweather

A few days ago, I was listening to an interview with a young girl who founded an internet startup. She hired a team to build a fairly simple web app through which she offered her service. The interviewer asked her, “Do you mind sharing – how much did it cost to build your website?”

After looking at the rest of this site, it shouldn't be a surprise that I love to work with Lato. It looks great on all resolutions and reads well on a computer screen. On the other hand, using a thin weight of Merriweather adds class to any paragraph. Merriweather is fairly easy to skim, which is why I'd recommend this setup for people with longform blog posts. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Lato:700|Merriweather:300,300italic,700);

h1,h2,h3,h4,h5,h6 {
  font-family: "Lato", sans-serif;
  font-weight: 700;
}
p,a,li,blockquote {
  font-family: "Merriweather", serif;
  font-weight: 300;
}

2. Playfair Display and Source Sans Pro

Playfair Display & Source Sans Pro

Contrary to popular belief, design is not ethereal. It’s not about shades of blue and the size of your logo – it’s the science of connecting visitors with what they need to see to purchase from you.

If you've been on the Internet before, you'll recognize Playfair Display. It's a designer favorite due to its elaborate ampersand which you can see above. In addition, Source Sans Pro adds a clean, modern touch to paragraphs when it's used at larger sizes. This is especially true on retina displays. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:900|Source+Sans+Pro:300,300italic,700);

h1,h2,h3,h4,h5,h6 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
}
p,a,li,blockquote {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}

3. Montserrat and Roboto

Montserrat & Roboto

Your site must behave like a brochure. You can allow your customers to explore, but you must make sure that they’re led down a path that spurs them to interact with your business. There are a million places for a customer to get lost along the way. The more you can limit these places, the better your site will convert.

Everyone knows about Montserrat, but few people realize how great Roboto looks at smaller sizes. I discovered Roboto's versatility after using it for a personal project. I've since noticed its prominence on many of Google's official websites – and now I can see why. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Montserrat:700|Roboto:400,400italic,700);

h1,h2,h3,h4,h5,h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
p,a,li,blockquote {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

4. Alegreya and Open Sans

Alegreya & Open Sans

If you’ve never spent ample time with an entrepreneur, you might doubt your own ability to create a successful business. When you spend time with entrepreneurs – think of that friend, relative, or mentor who started his own business – it makes you believe that you can do the same.

This is a beautiful combination for small businesses that need a personal touch, like yoga studios, mom-and-pop cafés, and anything that mentions "vegan" anywhere on the site. Alegreya isn't just fun to say – it's fun to look at. And when paired with a universal font like Open Sans, it provides just enough detail to keep your eye interested. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Alegreya|Open+Sans:300,300italic,700);

h1,h2,h3,h4,h5,h6 {
  font-family: "Alegreya", serif;
  font-weight: 400;
}
p,a,li,blockquote {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

5. Fira Sans and Lato

Fira Sans & Lato

If you’ve never asked a girl out, you might give up before asking one to go on a date. But after you’ve asked a girl out, you feel on top of the world – and you’d do it again in a heartbeat.

At higher weights, Fira Sans makes for a great heading. Its condensed lettering makes it perfect for blog feeds and sidebars. Pairing this with Lato, possibly the most versatile font in the whole Google Fonts project, makes it a strong combination for any longform blogging website. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:700|Lato:300,300italic,700);

h1,h2,h3,h4,h5,h6 {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
}
p,a,li,blockquote {
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

6. Cardo and Lato

Cardo & Lato

It all changes once you begin to make tiny amounts of progress. Just try it, even if it’s just for a single week. You’ll begin to trust in yourself that it’ll all work out. Each tiny goal you reach will set the stage for the next. And before long, you’ll be well on your way to where ever you need to be.

Cardo is one of my guilty pleasures – it's like a version of Garamond that you don't have to pay for. Not to mention its italicized lettering is beautiful. This combination can look awkward at times, but it'll fit right in on a minimal website. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Cardo|Lato:700,400,400italic);

h1,h2,h3,h4,h5,h6 {
  font-family: "Cardo", serif;
  font-weight: 400;
}
p,a,li,blockquote {
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

7. Oswald and Lora

Oswald & Lora

A man by the name of Ross Ulbricht built a multi-billion dollar internet company before he was 30. Then, he was sentenced to prison for life. Without parole. Ulbricht was an outlaw, but from the outside, he didn’t look like it – he lived with some roommates in a rented apartment, he had a Master’s degree, his bed was always made in the morning, and he liked to play music.

Oswald catches attention. A lot of it. While it might not be timeless, it's still prevalent in 2016 and I feel it will be commonly used for the next several years. Lora, on the other hand, is a clean, professional-looking serif font. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Oswald|Lora:400,700,400italic);

h1,h2,h3,h4,h5,h6 {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}
p,a,li,blockquote {
  font-family: "Lora", serif;
  font-weight: 400;
}

8. Montserrat and Vollkorn

Montserrat & Vollkorn

I know a fairly wealthy entrepreneur whose daughter played a popular video game called The Sims. One day, he discovered that she was using a cheat code to increase her ingame bank account, and he forced her to do manual labor around the house to make up for “the money she didn’t actually earn”.

Capitalizing Montserrat makes me giddy (see: the primary navigation menu on this site). It mixes surprisingly well with Vollkorn, a self-proclaimed "thick and meaty" font. I find Vollkorn very easy to read on the computer screen; it'd be best for a site with small blurbs of text. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Montserrat|Vollkorn:400,400italic,700);

h1,h2,h3,h4,h5,h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
p,a,li,blockquote {
  font-family: "Vollkorn", serif;
  font-weight: 400;
}

9. Lora and Average

Lora & Average

In college, I took courses on entrepreneurship. Each student had to come up with a business idea. Mine was “a simple content management system for creating personal websites – with all of the excess removed”. It would have a few prebuilt themes, beautiful font combinations, and an utterly simple and calming UI.

Lora is rarely used for headings, but when combined with the right fonts, it looks great. Average is an unassuming serif font that comes in only one weight: Normal. As such, it's great for static websites that don't italicize or embolden text, but if you need a font for a longform blog, you might want to choose a different option from this list. If you're interested in using this combination, just copy the code below into a global stylesheet...

@import url(https://fonts.googleapis.com/css?family=Lora:700|Average);

h1,h2,h3,h4,h5,h6 {
  font-family: "Lora", serif;
  font-weight: 700;
}
p,a,li,blockquote {
  font-family: "Average", serif;
  font-weight: normal;
}

10. * { font-family: "Lato"; }

Lato & Lato

When I held “corporate” jobs, every piece of business technology I used required a person to be trained and certified before they used it in a business context. Complicated technology was often buggy, it took a lot of time to learn, and it wasn’t fun to use. We’re moving towards a world where businesses are finally beginning to understand that “additional features” aren’t always a good thing.

Let's be serious: Lato is a beautiful, modern font that looks great on almost any website. It comes with multiple weights – from hairline to heavy – and they work well together when combined. Lato is the primary font in all of my branding for The Client Class, and look how it turned out! It must be good luck or something.

@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700,300);

h1,h2,h3,h4,h5,h6 {
  font-family: "Lato", sans-serif;
  font-weight: 300;
}
p,a,li,blockquote {
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up