How to Change Fonts in HTML

The Three Ways to Set Fonts in HTML

You change fonts in HTML by using the CSS font-family property, which tells the browser which typeface to display. You can write this CSS three ways: inline (directly on a tag), in a style block at the top of your page, or in a separate stylesheet file. Most of the time, you will use a style block or stylesheet because it keeps your HTML cleaner and lets you change fonts across your whole site in one place.

HTML itself has no font tag that works in modern browsers. The old <font> tag was removed years ago. Everything goes through CSS now, which is simpler once you know the syntax.

Key Takeaways

The CSS property font-family is what actually changes the font; you pair it with a font name like Arial, Georgia, or a web font.
Inline styles work on a single tag but are hard to maintain; a style block or stylesheet is better for controlling fonts across multiple pages.
Web-safe fonts like Arial, Times New Roman, and Verdana work on almost every device without extra setup.
Google Fonts and other web font services let you use thousands of typefaces by adding one line to your HTML head.
Font names with spaces (like "Times New Roman") must be wrapped in quotes in your CSS.

Inline Styles: Changing One Tag at a Time

The quickest way to change a font on a single element is to add a style attribute directly to the tag. Write the font-family property and the name of the font you want, like this:

<p style="font-family: Arial;">This paragraph is in Arial.</p>

This works when ready, but it only affects that one tag. If you have ten paragraphs and want them all in Arial, you would have to type the style attribute ten times. That is why inline styles are useful for one-off changes but not for managing fonts across a whole page.

Style Blocks: Controlling Fonts Across Your Page

A style block sits in the <head> section of your HTML and lets you set fonts for entire groups of tags at once. Open a <style> tag, write your CSS rules, and close it. Here is an example:

<head><style>p { font-family: Georgia; }h1 { font-family: Arial; }</style></head>

Now every <p> tag on that page displays in Georgia, and every <h1> displays in Arial. If you later decide to change all paragraphs to Verdana, you change it once in the style block instead of hunting through your HTML.

This approach works well for a single page. If you have multiple pages and want the same fonts everywhere, a stylesheet file is better.

Stylesheets: Managing Fonts Across Your Whole Site

A stylesheet is a separate file (usually named style.css) that holds all your CSS rules. You link to it from the <head> of every page. Create a plain text file, save it as style.css, and write your font rules inside:

p { font-family: Georgia; }h1 { font-family: Arial; }body { font-family: Verdana; }

Then in your HTML head, link to it:

Now every page that links to style.css uses those fonts. Change the font in one place, and it updates everywhere. This is the standard way professionals organize websites.

Web-Safe Fonts That Work Everywhere

Web-safe fonts are typefaces that come built into Windows, Mac, and Linux, so they display the same way on almost every device without you having to upload anything. The most reliable ones are Arial, Verdana, Georgia, Times New Roman, Courier New, and Comic Sans MS.

When you write font-family: Arial;, the browser looks for Arial on the user's computer. If it finds it, Arial displays. If not, the browser falls back to the next font you list. That is why you often see rules like this:

p { font-family: Arial, Verdana, sans-serif; }

This tells the browser: "Try Arial first. If the user does not have Arial, try Verdana. If they do not have Verdana either, use any sans-serif font the system has." The last item (sans-serif or serif) is a fallback category that every device understands.

Using Google Fonts and Web Font Services

If you want a font that is not web-safe—something decorative or modern—you can use Google Fonts, which hosts thousands of free typefaces. Go to fonts.google.com, find a font you like, and click it. Google gives you a link to paste into your HTML head and a CSS rule to use.

For example, if you choose the font "Roboto", Google shows you this link:

Paste that into your <head>, then use the font in your CSS:

p { font-family: 'Roboto', sans-serif; }

The browser downloads Roboto from Google's servers and displays it on your page. This works on any device with internet access. Other services like Adobe Fonts and Font Awesome work the same way.

Font Names With Spaces and Special Characters

If a font name has spaces in it—like "Times New Roman" or "Comic Sans MS"—you must wrap it in single or double quotes in your CSS. Without quotes, the browser gets confused and ignores the rule.

Right: font-family: "Times New Roman";Wrong: font-family: Times New Roman;

Font names without spaces (Arial, Georgia, Verdana) do not need quotes, but adding them does not hurt. Many developers quote all font names to be consistent.

Frequently Asked Questions

Can I use any font I find online?

You can read fonts and host them yourself using the @font-face rule in CSS, but you must check the license first. Many fonts are free for personal use but require payment for commercial websites. Google Fonts and Adobe Fonts are licensed for both personal and commercial use, so they are the safest choice.

What happens if the browser does not have the font I specified?

The browser moves to the next font in your list. If you write font-family: Roboto, Arial, sans-serif; and the user does not have Roboto, it tries Arial. If Arial is missing too, it picks a generic sans-serif font the system has. Always include a fallback category at the end.

Do I have to use a style block or stylesheet, or can I just use inline styles?

Inline styles work fine for testing or one-off changes, but they become hard to manage on larger sites. A stylesheet is the professional standard because you can change fonts everywhere at once and keep your HTML readable.

How do I make text bold or italic along with changing the font?

Use the font-weight property for bold and font-style for italic. For example: p { font-family: Arial; font-weight: bold; font-style: italic; } makes all paragraphs Arial, bold, and italic at the same time.

What is the difference between serif and sans-serif fonts?

Serif fonts have small lines at the ends of letters (like Times New Roman). Sans-serif fonts do not (like Arial). Serif fonts are often used for long reading passages because they feel traditional. Sans-serif fonts are common on websites because they look clean on screens. Both are fine; it depends on your design.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.