5 Types of Fonts You Can Use in HTML

Key Points

• Serif fonts, such as Times New Roman and Garamond, are easier to read for longer periods of time.
• Sans-serif fonts, like Arial and Helvetica, are more commonly used on the internet and are easier to read on screens.
• Monospace fonts, such as Courier, are commonly used in programming and display code.
• Cursive fonts mimic handwriting and are less commonly used, while fantasy fonts offer unique and distinct styles.
• Google Fonts and Adobe Fonts are font libraries that offer a wide range of fonts for web projects.
• Best practices for using fonts in HTML include focusing on readability, setting fallback fonts, using a limited number of fonts, and testing your site on multiple browsers and devices.

HTML fonts are the spice that brings a simple page of text to life. While we have CSS for adding style and flair to a website on a larger scale, there is only so much style you can inject into a page consisting primarily of text. The text itself is how you stand out.

HTML comes with a set of built-in fonts, and only a handful of classic fonts make the list of what is considered “web-safe” fonts. Despite referring to them as HTML fonts, you actually need CSS to some degree if you want to implement them. We’ll discuss all of this in today’s guide.

Nowadays, we have thousands of fonts to choose from, and you can access them on just about any browser. But in the early days of the internet, we didn’t have quite as large of a selection. In fact, early browsers didn’t load fonts from the web at all — they loaded them directly from the user’s computer. So, it used to be up to you to load your own fonts. 

Luckily, access to fonts these days is a piece of cake. If you’re learning web development, mastering fonts is a crucial skill. When you’re designing a beautiful website, you can’t just pick any old font. So, in today’s article, we’re going to explore the common web-safe HTML fonts, and how to use them. We’ll also dive into some additional font libraries that you can access if you want to really spice things up.

Understanding Web-Safe Fonts and Font Families

So, what is a web-safe font anyway? Aren’t all fonts on the internet considered safe? Well, yes and no. The term “web-safe” was coined back in the Netscape Navigator days, when developers needed a way to determine which fonts to use for maximum accessibility. Web-safe fonts, or system fonts, are ones that are guaranteed to work across multiple browsers since they are already present in the system. 

Remember how we said fonts used to only load through the user’s computer and not the internet? Those are system fonts, and they make up the backbone of HTML fonts that you’ll find across the majority of web browsers. The term web-safe simply means that the font will work fine, no matter what device you access it from Windows, macOS, or Linux. That goes for phones and tablets, too.

There are nine different fonts that fall under the web-safe umbrella:

• Arial (sans serif)
• Helvetica (sans serif)
• Tahoma (sans serif)
• Times New Roman (serif)
• Verdana (sans serif)
• Courier New (monospace)
• Georgia (serif)
• Impact (sans serif)
• Trebuchet MS (sans serif)

As you can see, we’ve also made distinctions where certain fonts are serif, sans serif, or monospace. We’ll get into the differences between each of these types of fonts and look at a few examples next.

Now, you might be saying, “But I’ve seen thousands of different fonts on the Internet!” And you would be correct. But instead of listing every single font out there, we’re going to break them down into five categories. These match up with the five generic CSS font families.

• Serif fonts
• Sans-serif fonts
• Monospace fonts
• Cursive fonts
• Fantasy fonts

Let’s check them out in a bit more detail.

1. Serif Fonts

You’ll probably recognize serif fonts if you’ve ever picked up a book. These are the old-school fonts that have been in use for decades — centuries, even. We still use them to this day for one simple reason: readability. Serif fonts are much easier on the eye than sans serif fonts, making them easier to read for longer periods of time. If you have a huge wall of text, you’d do best to use a serif font.

You can tell a serif font apart from a sans serif font thanks to the little hooks and swishes hanging off the characters. They appear more “fancy” than other fonts. Serif fonts that fall under the web-safe classification are Time New Roman, Georgia, and Garamond. 

2. Sans-Serif Fonts

While serif fonts might be the OGs of the font world, sans-serif fonts are far more common these days. You’re reading a sans-serif font right now! But if serif fonts are easier on the eyes, why does it seem like the internet collectively chose to migrate to sans-serif?

Well, the fact of the matter is that sans-serif fonts are actually easier to read on screens. Sure, serif fonts don’t hurt your eyes when you’re plowing through a huge wall of text. But if you’re just sipping in short paragraphs of text on a screen, the sans-serif font is much more pleasing to the eye.

Because of this, sans-serif fonts have taken over the internet. When you add in the fact that sans-serif fonts are more legible for the visually impaired, it is a no-brainer that they are so widespread. Many marketing firms tout their use as more modern and minimalist. So, you’ll often see many brands using them in their ads and marketing materials.

Some of the sans-serif fonts that fall under the web-safe classification are Arial, Helvetica, Tahoma, Trebuchet, and Verdana.

3. Monospace Fonts

Serif and sans-serif are the leading two types of HTML fonts. But they aren’t the only ones in the family. Monospace fonts are also important when it comes to specialized uses. As the name implies, monospace fonts stand out due to the fact that they take up a single or “mono” space. Each character takes up the same amount of horizontal space, no matter which one it is.

Typewriters are the kings of monospace fonts. In fact, all fonts used to be typed in this monospace nature. However, these days, you won’t see monospace fonts getting quite as much attention. You’ll primarily see them in programming, where applications like IDEs and text editors employ them to display code.

By far, the most common monospace font is Courier. This classic font closely resembles the typefaces on old typewriters.

4. Cursive Fonts

Cursive fonts don’t typically fall under the web-safe umbrella, and they are less commonly used. But you’ll still find them across the internet for various types of projects. Plus, they are one of the five generic font families in CSS. So, it makes sense to know what they are.

As the name implies, cursive fonts closely mimic handwriting in their appearance. Some of the most popular ones include Brush Script MT, Lucida Handwriting, Pacifico, Lobster, and many others. There is much more variation in this family of fonts, as you can see here:

5. Fantasy Fonts

Fantasy fonts fall outside of the normal serif or sans-serif classification. But they are also distinct from the handwritten style of cursive fonts. When you want to add a weird or unique flair to part of your web project, a fantasy font can be just what you need.

There are thousands of fantasy fonts to choose from, and this category has more variation than any of the others. However, you’ll do best if you avoid these types of fonts if you’re building a public-facing website or project that other people will access. The reason is that they are less accessible and offer lower readability than other fonts.

Fantasy fonts encompass some of the more popular fonts, such as Papyrus and Copperplate, but they can also include totally illegible fonts, such as Wingdings and Pirate icons. Many fantasy fonts aren’t even letters but symbols.

6. Other HTML Fonts

As far as web-safe fonts go, the list ends here. Cursive fonts, fantasy fonts, and other types of fonts are not regarded as web-safe, although they almost universally work across different devices, thanks to the capabilities of modern web browsers.

Fonts like Brush Script and Comic Sans are common in this category. Although, you can easily find hundreds or even thousands of similar fonts. 

If you want to access more fonts than your system already has access to by default, you’ll need to look for a font library. There are two major players worth looking into here: Google Fonts and Adobe Fonts.

Google Fonts

With Google being a leading search engine, web browser, and cloud computing platform, it is no surprise that they have the world of fonts in a chokehold, too. You can check out their font library, which is chock full of fonts for every type of website or project.

Google gives you access to 1562 different fonts (at the time of this writing), and they are always adding more. You can browse their library freely and play around with different styles to experiment. When you find a font you like, adding it to your project for free is super simple. We’ll get into the implementation shortly.

Adobe Fonts

Adobe is another choice when it comes to font libraries. Unlike Google, you’ll need to make an account to access any of Adobe’s fonts. But once you do, you can access roughly 1000 fonts at no charge. They have an even more impressive library of 20,000 fonts, but you’ll need a Creative Cloud subscription if you want to use them.

How to Include Fonts in HTML

Now that you have a handle on some of the common fonts and how to find them, let’s talk about how to import them into your HTML.

Despite the fact that we have been referring to these as HTML fonts, you actually need CSS to implement them in your code. You’ll use CSS selectors and attributes to set your font types and styles.

Let’s look at how to do that with some code.

We’ll start with an example HTML file, and target the h1 tag. Here is the HTML code if you’d like to follow along:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="target">Hello, World!</h1>
</body>
</html>

As you can see, we’re starting with all of the necessary HTML code, such as the DOCTYPE declaration and language declaration, and including a link to the CSS stylesheet. The stylesheet is where you will alter the fonts.

#target {
  font-family: "Times New Roman", Times, serif;
}

As you can see, we are targeting the ID of our h1 tag. However, you could also target all h1 tags if you wanted to. That would look almost identical, but pay attention to the CSS selector:

h1 {
  font-family: "Times New Roman", Times, serif;
}

This code will set the font to Times New Roman. It also sets a fallback font as Times and finishes up by specifying the font type as serif. Notice how each section is separated by a comma.

What if you wanted to set a font size? Or make your font bold or italic? You can do that by adding a few CSS attributes. Make a new line for each one, font-size, font-weight, and font-style.

h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
}

What if you want to use a font library like Google Fonts? There are a couple of ways to do this. The easiest is to simply link the font library in the <head> of your HTML file. That would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Example</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=Rubik+80s+Fade&display=swap" rel="stylesheet">
</head>
<body>
  <h1 id="target">Hello, World!</h1>
</body>
</html>

You can browse Google Fonts and copy the link directly from their website once you find a font. For example, we used Roboto Thin 100 in our HTML file. Once you add the link, then you can specify where you want to use the font in your CSS stylesheet—the same way you would select any other font.

Best Practices for Using Fonts in HTML

Now that you know how to switch up the fonts in your web projects, you are one step closer to becoming a master web developer. To gain a real mastery over HTML fonts, though, there are a few best practices you should follow.

Focus on Readability

If you’re building a website just for your own entertainment or learning purposes, you can go crazy. Don’t worry about readability. Use whatever fonts you want. But if you are building something for a client, or creating a site that will be accessed by anyone on the internet, you want to make sure it is readable.

Focusing on readability is of the utmost importance for public-facing projects, since your site needs to meet accessibility requirements. You need to take into consideration the needs of visitors who don’t have the best eyesight or who rely on screenreaders to view your site. Plus, if you are trying to sell a product or keep your visitors’ attention, you can’t have an illegible font.

To make sure you’re checking all of the right boxes as far as accessibility is concerned, stick to the tried and true websafe fonts we discussed. Avoid cursive or fantasy fonts, and make sure your fonts are large enough to be easily readable on a small screen.

Always Set Fallback Fonts

The web doesn’t always work how you expect. As a developer, surprises are common. You can’t plan for every single type of device and every generation of web browsing software. Sometimes, a visitor lands on your website, and the fonts just don’t work as you intended.

Setting fallback fonts is one way to prepare for these surprises and ensure your website still looks good, even if your fonts don’t work as expected. When your font of choice fails to load, the fallback font will kick in.

The result is you still have some level of control — instead of your website just looking broken or generic. Plus, this is incredibly useful when visitors access your website from an outdated browser or unsupported device.

Don’t Use Too Many Different Fonts

If you’re building a website, you should stick to one or two fonts to maintain consistency. Having too many fonts might make your site look cluttered or less visually appealing. Sticking to one or two fonts will also help your site convey a more focused brand image.

If you’re building a site for a client, the last thing you want to do is make the site seem like some amateur project. But besides hurting your site aesthetically, loading too many fonts can also impact performance. If you don’t want a slow website, go easy on the fonts.

Test Your Site On Multiple Browsers and Devices

Testing is one of the most important tasks in web development. Ensuring your fonts look good across different browsers and devices is a simple task that will show you how different visitors experience your site. Tiny screens might make your fonts look cluttered or illegible. Whereas larger screens might stretch your text out to the point it no longer looks good.

See how your font choices look on your phone and desktop. Open your site in other browsers like Firefox or Brave, and maybe try booting up good ol’ Internet Explorer if you still have an old Windows 7 or Windows Vista machine lying around — you would be surprised at the large percentage of the population still relying on antiquated web browsers.

Additionally, you can see if your fallback fonts are working properly. You might find that you have to tone down your font choices or stick to more basic fonts for your site to look good on different browsers.

Summary Table

The image featured at the top of this post is ©Rawpixel.com/Shutterstock.com.