Change Font HTML: A How-To Guide

The font-family CSS rule lets you define the font of an HTML web document. To refer to external fonts, you can use the url() method to define a font face. Or, you can embed a font CSS file from a site like Google Fonts.

As developers, there will be a time when we won’t want to use the default font that’s populated when our HTML is processed. This article aims to show you how to change the font in your HTML document using best practices.

How to Change Font in HTML

There are three ways to change the font of a web page in HTML:

• Using a built-in font with the font-family rule.
• Using the font-face rule to refer to an external font.
• Using an external CSS style sheet to style the fonts on a web page.

In this article, we’ll talk about each of these methods of changing a font.

HTML Change Font: Built-in Font-Family

The first way we can change our font is by using the font-family property in our inline styling. This can be done like so:

<p style="font-family:wingdings;" id="wingdings">New York</p>

We simply use the font-family property to indicate which font we would like to use in our block of text. Many of the standard fonts are readily available to use.

It’s a good idea to have a backup font, just in case the first font-choice cannot be loaded. It’s as easy as adding a comma and the new font-family name. I always end with a generic grouping as well in that one edge case that the first two are not available.

<p style="font-family: Roboto, Lato, sans-serif" 
id="roboto-plus-backups">New York</p>

The generic grouping at the end is just the default sans-serif font for whatever device the client is using. The generic family names that are available to us: monospace, serif, sans-serif, cursive, and fantasy. You can also access some specific fonts like Times New Roman.

HTML Change Font: Using a font-face

You can use the font-face rule to import a font from an external source onto your web page.

To use this approach, you must have access to an external font document. Font documents usually have the extension “.ttf”.

Let’s take a look at how to change a font using the font-face attribute. Here is the CSS style rule we need to use:

@font-face {
	font-family: "Open Sans";
	src: url(yoururl);
}

We use the font-face style attribute to declare our new font. The font-family attribute defines the name of our new font. src: url() instructs our CSS document on where to find our font. The value of “yoururl” should be the URL of your text font.

Our font will not change our web page just yet. We have to tell our CSS style sheet which elements should use our new font:

h1, h2, h3 {
	font-family: "Open Sans";
}

This code tells our CSS style sheet to apply the “Open Sans” font to some elements on our web page. h1, h2, h3 is a CSS selector that applies our style to the elements listed. These elements are HTML headings.

Change Font HTML: External CSS Font

Some sites such as Google Fonts let you embed a font onto your site using a CSS style sheet. These styles let you define font types using CSS attributes. In this instance, we’ll try to use the ‘Bangers’ and the ‘Yellowtail’ font from Google Fonts:

<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p>
<p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>

If you were to run the code above in your IDE of choice and load it, it will default to the generic fonts. If you would like to use these fonts, you can though with a few simple clicks:

1. Visit Google Fonts.
2. Take the time to play around with the site if you’d like. There’s so many options for fonts here. you can customize the sample text with whatever you’d like. There’s an input at the top of the web page for you to enter in what you’d like.
3. Search for ‘Yellowtail’ and click on it. You should come to a screen with detailed information about the font. Look for a “+ Select This Style” button and click on it.
4. A sidebar drawer should have popped out with information about your selection. It’ll stay open while you browse more fonts. Click the Browse Fonts link up at the top of the screen and search for ‘Bangers’. Walk through the same process as you did for ‘Yellowtail’.
5. On the sidebar, you’ll see a tab for ‘Embed’. Click on it.
6. The <link> option should already be highlighted. Copy and paste the <link> into the head of your HTML.
7. Follow the guidelines given for how to use each font in CSS. They give recommended backup fonts as well.
8. That’s it! You’re ready to use these fonts in your document.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet">
 
 </head>
 <body>
   <p id="courier">New York</p>
   <p id="roboto">New York</p>
   <p id="raleway" style="font-family: Raleway, sans-serif">New York</p>
   <p id="serif" style="font-family: Courier New">New York</p>
   <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p>
   <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p>
   <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
   <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p>
 </body>
</html>

The working demo above shows both built-in and third party fonts being used. Try your hand at importing other fonts! 

Conclusion

You can change an HTML font by using the font-family attribute or by using an external CSS style sheet with custom fonts. To embed a custom font into the CSS of your site, you can use the font-face rule.

Do you want to learn more about coding in HTML? Read our How to Learn HTML guide. In this guide you’ll find top tips on how to learn HTML as well as guidance on the best online courses.