Google Fonts
If you do not want to use the standard HTML fonts, you can use Google Fonts.
Google Fonts are free to use and have more than 1000 fonts to choose from.
How To Use Google Fonts
Add a special style sheet <link> in the <head> section, then refer to the font in your CSS.
Note: Always list at least one fallback font, like a generic serif or sans-serif at the end, to avoid unexpected results.
Sofia
Uses the Google Font Sofia for the page.
Prompt
An HTML page that uses the Google Font "Sofia".
In the
<head>, add a <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">, then an internal <style> block setting the body font-family to "Sofia", sans-serif. Add a heading, a line of text, and some digits.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Trirong
Uses the Google Font Trirong for the page.
Prompt
An HTML page that uses the Google Font "Trirong".
In the
<head>, add a <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">, then an internal <style> block setting the body font-family to "Trirong", serif. Add a heading, a line of text, and some digits.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
<body>
<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Audiowide
Uses the Google Font Audiowide for the page.
Prompt
An HTML page that uses the Google Font "Audiowide".
In the
<head>, add a <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">, then an internal <style> block setting the body font-family to "Audiowide", sans-serif. Add a heading, a line of text, and some digits.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>
<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Use Multiple Google Fonts
To use several Google Fonts, separate the font names with a pipe character (|) in the link.
Note: Requesting many fonts can slow down your pages, so be careful.
Example
Three fonts are requested in one link and used on three headings.
Prompt
An HTML page that requests several Google Fonts at once.
In the
<head>, add a <link> to https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong (font names separated by a pipe), then style three heading classes (a, b, c) with Audiowide, Sofia, and Trirong. Add a heading of each class.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
<body>
<h1 class="a">Audiowide Font</h1>
<h1 class="b">Sofia Font</h1>
<h1 class="c">Trirong Font</h1>
</body>
</html>
Styling Google Fonts
You can style Google Fonts with CSS just like any other font.
Example
The Sofia font is given a larger size and a text shadow.
Prompt
An HTML page that styles a Google Font with extra CSS.
In the
<head>, link the Sofia Google Font, then in a <style> block set the body to "Sofia", sans-serif, font-size 30px, and a text-shadow of 3px 3px 3px #ababab. Add a heading, a line of text, and some digits.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Enabling Font Effects
Google also offers font effects. First add effect=effectname to the Google link, then add a class to the element. The class name always starts with font-effect- and ends with the effect name.
To use several effects, separate the effect names with a pipe character (|).
Fire effect
The fire effect is added to the Sofia font.
Prompt
An HTML page that adds the Google "fire" font effect.
In the
<head>, link https://fonts.googleapis.com/css?family=Sofia&effect=fire, set the body to "Sofia", sans-serif at 30px, then add an <h1> with class "font-effect-fire".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
</html>
Multiple effects
Several effects (neon, outline, emboss, and multiple shadow) are requested at once.
Prompt
An HTML page that adds several Google font effects at once.
In the
<head>, link https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple (effects separated by a pipe), set the body to "Sofia", sans-serif at 30px, then add four headings with classes font-effect-neon, font-effect-outline, font-effect-emboss, and font-effect-shadow-multiple.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
</html>