20 Best Google Font Combinations for Your Next Design

Typography is an essential part of web design but it’s a challenge to choose right type for your design. In our previous article, we have collected some best Google fonts for you to choose right one. Undoubtedly Google fonts are great, easy to use, free resource that everyone can use to give extraordinary typography to your websites.

Today, we have a best collection of Google font combinations for you to add a nice bit of typography to your next design. We have given example code with each combination. You just need to copy and paste our example code to add style to your websites as per your need. So enjoy!

Droid Serif & Droid Sans

HTML for Droid Serif & Droid Sans Combination

<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">

CSS for Droid Serif & Droid Sans Combination

h1 { font: 400 95px/1.1 'Droid Serif', Georgia, Times, serif }
p { font: 400 17px/1.6 'Droid Sans', Helvetica, Arial, sans-serif }

Lobster & Cabin

HTML for Lobster & Cabin Combination

 <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Cabin" rel="stylesheet" type="text/css">

CSS for Lobster & Cabin Combination

h1 { font: 400 95px/1.1 'Lobster',Georgia, Times, serif; }
p { font: 400 17px/1.6 'Cabin', Helvetica, Arial, sans-serif; }

Ubuntu & Vollkorn

HTML for Ubuntu & Vollkorn Combination

<link href="http://fonts.googleapis.com/css?family=Ubuntu:bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet" type="text/css">

CSS for Ubuntu & Vollkorn Combination

h1 { font: 400 95px/1.1 'Ubuntu', Helvetica, Arial, sans-serif }
p { font: 400 17px/1.6 'Vollkorn', Georgia, Times, serif }

Bevan and Pontano Sans

HTML for Bevan and Pontano Sans Combination

<link href="http://fonts.googleapis.com/css?family=Bevan" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pontano+Sans" rel="stylesheet" type="text/css">

CSS for Bevan and Pontano Sans Combination

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

Abril Fatface & Average

HTML for Abril Fatface & Average Combination

<link href="http://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Average" rel="stylesheet" type="text/css">

CSS for Abril Fatface & Average Combination

h1 { font: 400 95px/1.1 'Abril Fatface', Georgia, serif }
p { font: 400 17px/1.6 'Average', Garamond, Georgia, serif }

Corbin & Nobile

HTML for Corbin & Nobile Combination

<link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Nobile" rel="stylesheet" type="text/css">

CSS for Corbin & Nobile Combination

h1 { font: 400 95px/1.1 'Corben', Georgia, Times, serif }
p { font: 400 17px/1.6 'Nobile', Helvetica, Arial, sans-serif }

Molengo & Lekton

HTML for Molengo & Lekton Combination

<link href="http://fonts.googleapis.com/css?family=Lekton" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Molengo" rel="stylesheet" type="text/css">

CSS for Molengo & Lekton Combination

h1 { font: 400 95px/1.1 'Molengo', Georgia, Times, serif }
p { font: 400 17px/1.6 'Lekton', Helvetica, Arial, sans-serif }

Allan & Cardo

HTML for Allan & Cardo Combination

<link href="http://fonts.googleapis.com/css?family=Allan:bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cardo" rel="stylesheet" type="text/css">

CSS for Allan & Cardo Combination

h1 { font: 400 95px/1.1 'Allan', Helvetica, Arial, sans-serif }
p { font: 400 17px/1.6 'Cardo', Georgia, Times, serif }

Dancing Script & Josefin Sans

HTML for Dancing Script & Josefin Sans Combination

<link href="http://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet" type="text/css">

CSS for Dancing Script & Josefin Sans Combination

h1 { font: 400 95px/1.1 'Dancing Script', Georgia, Times, serif }
p { font: 400 17px/1.6 'Josefin Sans',Helvetica, Arial, sans-serif }

Arvo & PT Sans

HTML for Arvo & PT Sans Combination

<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">

CSS for Arvo & PT Sans Combination

h1 { font: 400 95px/1.1 'Arvo', Georgia, Times, serif }
p { font: 400 17px/1.6 'PT Sans',Helvetica, Arial, sans-serif }

Allerta & Crimson

HTML for Allerta & Crimson Combination

<link href="http://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Allerta" rel="stylesheet" type="text/css">

CSS for Allerta & Crimson Combination

h1 { font: 400 95px/1.1 'Allerta', Helvetica, Arial, sans-serif; }
p { font: 400 17px/1.6 'Crimson Text',Georgia, Times, serif; }

Raleway & Goudy

HTML for Raleway & Goudy Combination

<link href="http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet" type="text/css">

CSS for Raleway & Goudy Combination

h1 { font: 400 95px/1.1 'Raleway', Helvetica, Arial, sans-serif; }
p { font: 400 17px/1.6 'Goudy Bookletter 1911',Georgia, Times, serif; }

Rancho & Gudea

HTML for Rancho & Gudea Combination

 <link href="http://fonts.googleapis.com/css?family=Rancho" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Gudea" rel="stylesheet" type="text/css">

CSS for Rancho & Gudea Combination

h1 { font: 400 95px/1.1 'Rancho', Georgia, serif; }
p { font: 400 17px/1.6 'Gudea', Verdana, Helvetica, sans-serif; }

Cantata One & Imprima

HTML for Cantata One & Imprima Combination

 <link href="http://fonts.googleapis.com/css?family=Cantata+One" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Imprima" rel="stylesheet" type="text/css">

CSS for Cantata One & Imprima Combination

h1 { font: 400 70px/1.2 'Cantata One', Georgia, serif; }
p { font: 400 16px/1.6 'Imprima', Verdana, Helvetica, sans-serif; }

Nixie One & Ledger

HTML for Nixie One & Ledger Combination

 <link href="http://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Ledger" rel="stylesheet" type="text/css">

CSS for Nixie One & Ledger Combination

h1 { font: 400 80px/1.2 'Nixie One', Georgia, serif; } 
p { font: 400 15px/1.6 'Ledger', Garamond, Georgia, serif; }

Pacifico & Arimo

HTML for Pacifico & Arimo Combination

 <link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Arimo" rel="stylesheet" type="text/css">

CSS for Pacifico & Arimo Combination

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

Istok Web & Lora

HTML for Istok Web & Lora Combination

 <link href="http://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Lora" rel="stylesheet" type="text/css">

CSS for Istok Web & Lora Combination

h1 { font: 400 70px/1.2 'Istok Web', Verdana, Helvetica, sans-serif }
p { font: 400 16px/1.6 'Lora', Georgia, serif; }

Sansita One & Kameron

HTML for Sansita One & Kameron Combination

 <link href="http://fonts.googleapis.com/css?family=Sansita+One" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Kameron" rel="stylesheet" type="text/css">

CSS for Sansita One & Kameron Combination

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

Playfair Display and Muli

HTML for Playfair Display and Muli Combination

 <link href="http://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet" type="text/css">

CSS for Playfair Display and Muli Combination

h1 { font: 400 60px/1.5 'Playfair Display', Georgia, serif; }
p {  font: 400 16px/1.6 'Muli', Verdana, Helvetica, sans-serif; }

Bree Serif & Open Sans

HTML for Bree Serif & Open Sans Combination

<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

CSS for Bree Serif & Open Sans Combination

h1 {font: 400 60px/1.3 'Bree Serif', Georgia, serif; } 
p {font: 400 14px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;}

Finally, these are my favorite Google font combinations that I have shared with you. These can be very helpful for your some projects that you’re working on. Also if you have any precious Google Web Font combinations that you’d like to share? Leave a comment below and let us know! Thanks!