How to Change Fonts in HTML

Using the right font when creating a webpage can have a significant impact on the user experience. Different fonts can create a visual hierarchy, establish your unique branding, and also improve esthetics and readability.

In this lesson, we are going to cover the various types of fonts and how you can load the fonts in HTML to enhance the overall design of your webpages.

Types of fonts

We generally classify fonts into different categories based on their styles. The most common ones are:

Serif fonts: These fonts have small decorative lines attached to the ends of the letters, also known as serifs. Some examples include Times New Roman, Georgia, and Garamond.

Sans-serif fonts: These fonts do not have serifs. Some examples are Arial, Helvetica, and Calibri.

Monospace fonts: These fonts have all characters the same width. They are most commonly used in coding environments. Some examples include Courier New, Lucida Console, and so on.

Handwritten fonts: Fonts that mimic handwritings. They are also called cursive fonts, such as Comic Sans MS.

Display fonts: These fonts are attention-grabbing and often used for headings, titles, or logos. Examples include Impact, Lobster, and Bebas Neue. They are also called fantasy fonts.

Font family

You can use the font-family property to specify the font you wish to use. For example:

html

1<p>Lorem ipsum dolor . . .</p>

In most cases, your browser will use a serif font as the default. It may differ for your operating system, but that doesn't matter. You can change the default font like this:

css

1p {
2  font-family: Arial;
3}

Here, we defined the font as Arial, a widely used sans-serif font available on almost all platforms.

Google fonts

You can also download fonts from the internet using tools such as Google Fonts and then use them on your webpage. For example, after you've found and selected your desired fonts, follow the instructions to embed them into your webpage.

Either copy the <link> elements into the <head> section of your HTML document.

html

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7
8    <link rel="stylesheet" href="style.css" />
9
10    <link rel="preconnect" href="https://fonts.googleapis.com" />
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12    <link
13      href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=EB+Garamond&family=Montserrat&family=Ubuntu+Mono&display=swap"
14      rel="stylesheet" />
15  </head>
16
17  <body>
18    . . .
19  </body>
20</html>

Or copy the @import code to the beginning of your CSS file.

css

1@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=EB+Garamond&family=Montserrat&family=Ubuntu+Mono&display=swap");
2
3p {
4  /* . . . */
5}

And then, you can use them like regular fonts. Notice that if the font name consists of multiple words, you must wrap it in quotes.

css

1p {
2  font-family: "EB Garamond";
3}

Local fonts

In addition to Google fonts, you can also load the fonts locally if you have the font files, which are typically in .ttf, .otf, .woff, or .woff2 formats.

To load the font, you need to use the @font-face at rule.

css

1@font-face {
2  font-family: "FontName";
3  src:
4    url("path/to/your/font.woff2") format("woff2"),
5    url("path/to/your/font.woff") format("woff"),
6    url("path/to/your/font.otf") format("otf") url("path/to/your/font.ttf") format(
7        "ttf"
8      );
9}

You can specify multiple sources so that the browser can decide which one to use. Among these options, .woff2 is the preferred web font format, so make sure it is the first option. .woff2 uses a more advanced compression algorithm, leading to better performance.

After loading the font files, you can use the font like we've discussed before:

css

1p {
2  font-family: "FontName";
3}

Fallback fonts

If, for some reason, the user's browser cannot load the specified font, it will simply use the default option. That could be problematic because all the texts will have the same font.

Instead, it is best to have a fallback system so that even if your first option is not available, the browser will fall back to its closest relative.

You can create a fallback system by specifying multiple fonts with the font-family property, separated with commas:

css

1p {
2  font-family: "EB Garamond", Cambria, Cochin, Georgia, Times,
3    "Times New Roman", serif;
4}

The system should start with the font you like and end with common fonts that are available on most platforms (such as Times New Roman), as well as a generic font family.