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
<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" />
CSS
h2 {font: 400 2.5em/1.3 'Roboto Slab',serif;}
p {font: 400 1em/1.6 'Roboto Slab',serif;}
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
<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" />
CSS
h2 {font: 500 2.5em/1.3 'Raleway', sans-serif;}
p {font: 400 1em/1.6 'Merriweather Sans', sans-serif;}
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
<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" />
CSS
h2 {font: 400 2.5em/1.3 'Lustria', serif;}
p {font: 400 1em/1.6 'Lato', sans-serif;}
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
<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" />
CSS
h2 {font: 500 2.5em/1.3 'Ubuntu', sans-serif;}
p {font: 400 1em/1.6 'Lora', serif;}
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
<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" />
CSS
h2 {font: 700 2.2em/1.3 'Quattrocento', serif;}
p {font: 400 1em/1.6 'Quattrocento Sans', sans-serif;}
