Blog.

5 great Google font combinations

2 years ago, embedding font’s was far more different than it is today. Previously we needed to use Typekit or Cufon which was bulky and lacked compatibility.

Today, we can easily add font’s using CSS. One way is to use Google Web Fonts. Google has hundreds of font’s that we can freely use.

Below are 5 great Google font combinations.

Roboto Slab and Roboto

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

[sourcecode language=”html”]
<link href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab:700,100,300,400" rel="stylesheet" type="text/css" />
[/sourcecode]

CSS

[css]
h2 {font: 400 2.5em/1.3 ‘Roboto Slab’,serif;}
p {font: 400 1em/1.6 ‘Roboto Slab’,serif;}
[/css]

Raleway and Merriweather Sans

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

[sourcecode language=”html”]
<link href="http://fonts.googleapis.com/css?family=Raleway:400,600,300,200,500,700,800,900" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700,700italic,800,800italic" rel="stylesheet" type="text/css" />
[/sourcecode]

CSS

[css]
h2 {font: 500 2.5em/1.3 ‘Raleway’, sans-serif;}
p {font: 400 1em/1.6 ‘Merriweather Sans’, sans-serif;}
[/css]

Lustria and Lato

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

[sourcecode language=”html”]
<link href="http://fonts.googleapis.com/css?family=Lustria" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:400,100italic,100,300,300italic,400italic,700,700italic,900,900italic" rel="stylesheet" type="text/css" />
[/sourcecode]

CSS

[css]
h2 {font: 400 2.5em/1.3 ‘Lustria’, serif;}
p {font: 400 1em/1.6 ‘Lato’, sans-serif;}
[/css]

Ubuntu and Lora

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

[sourcecode language=”html”]
<link href="http://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic" rel="stylesheet" type="text/css" />
[/sourcecode]

CSS

[css]
h2 {font: 500 2.5em/1.3 ‘Ubuntu’, sans-serif;}
p {font: 400 1em/1.6 ‘Lora’, serif;}
[/css]

Quattrocento and Quattrocento Sans

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

[sourcecode language=”html”]
<link href="http://fonts.googleapis.com/css?family=Quattrocento:400,700" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700,700italic" rel="stylesheet" type="text/css" />
[/sourcecode]

CSS

[css]
h2 {font: 700 2.2em/1.3 ‘Quattrocento’, serif;}
p {font: 400 1em/1.6 ‘Quattrocento Sans’, sans-serif;}
[/css]

Author:

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.