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!
