Google Web Fonts are easy to use on any website and add a personal touch.
A selection of favorite Google’s script web fonts
ARIZONIA
Google Font Arizonia
HTML
[codesyntax lang=”html4strict” title=”html”]
<link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
[/codesyntax]
CSS
[codesyntax lang=”css” title=”CSS”]
font-family: 'Arizonia', cursive;
[/codesyntax]
GREAT VIBES
Google Font Great Vibes
HTML
[codesyntax lang=”html4strict” title=”html”]
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
[/codesyntax]
CSS
[codesyntax lang=”css” title=”CSS”]
font-family: 'Great Vibes', cursive;
[/codesyntax]
TANGERINE
Google Font Tangerine
HTML
[codesyntax lang=”html4strict” title=”html”]
<link href='https://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
[/codesyntax]
CSS
[codesyntax lang=”css” title=”CSS”]
font-family: 'Tangerine', cursive;
[/codesyntax]
PACIFICO
Google Font Pacifico
HTML
[codesyntax lang=”html4strict” title=”html”]
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
[/codesyntax]
CSS
[codesyntax lang=”css” title=”CSS”]
font-family: 'Pacifico', cursive;
[/codesyntax]
LOBSTER
Google Font Lobster
HTML
[codesyntax lang=”html4strict” title=”html”]
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
[/codesyntax]
CSS
[codesyntax lang=”css” title=”CSS”]
font-family: 'Lobster', cursive;
[/codesyntax]
LOBSTER TWO
Google Font Lobster Two
Lobster Two comes in two weights, regular 400 and bold 700, each available as regular and italics:
http://www.google.com/fonts#QuickUsePlace:quickUse
HTML
[codesyntax lang=”html4strict” title=”html”]
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:400,400italic' rel='stylesheet' type='text/css'>
[/codesyntax]
CSS
[codesyntax lang=”css” title=”CSS”]
font-family: 'Lobster Two', cursive;
[/codesyntax]
How to implement Google Fonts?
You can start using the Google Fonts API in just two steps:
1. Add a stylesheet link to request the desired web font(s):
[codesyntax lang=”html4strict”]
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Font+Name">
[/codesyntax]
2. Style an element with the requested web font, either in a stylesheet, for example:
[codesyntax lang=”css”]
h1 {
font-family: 'Font Name', serif;
}
[/codesyntax]
or with an inline style on the element itself:
[codesyntax lang=”html4strict”]
<div style="font-family: 'Font Name', serif;">Your text</div>
[/codesyntax]
Google Web Fonts
Want to see all of Google’s web fonts: http://www.google.com/fonts#