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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Google Font Combinations

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

Bree Serif & Open Sans Combination

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!

email

Leave a Reply

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

Web Design Quote | Web Design Estimate
Categories

Related Post

Archives
June 2017
S M T W T F S
« May    
 123
45678910
11121314151617
18192021222324
252627282930  
Pond Calculator

Select Pond Shape

Powered by Pond Supplies for Less

Our Calculator Estimates The Following Size For Your Pond Liner:

Pond Volume: 0 US Gallons | Liters: 0 | Imperial Gallons: 0

Estimated Pond Liner Size: 0 X 0 Feet

Note: Pond liner size estimate includes a 1 foot overlap on all sides.

Powered by Pond Supplies For Less