How to Change Font in HTML: The Three Methods That Work

The fastest way to change font in HTML

You change font in HTML by using the <style> tag, the style attribute, or a separate CSS file. The style attribute is the quickest for a single word or sentence. The <style> tag works when you want to change fonts across an entire page. A CSS file is what you use when you're managing fonts across many pages at once.

All three methods do the same thing: they tell the browser which typeface to display. The difference is where you write the instruction and how many elements it affects.

Key Takeaways

The style attribute changes font for one specific element: <p style="font-family: Arial;">Your text</p>
The <style> tag in the page head changes font for all matching elements on that page.
Font names with spaces (like "Times New Roman") must be wrapped in quotes.
Always list backup fonts after your first choice, separated by commas, so text displays even if the first font isn't available.
Web-safe fonts like Arial, Georgia, and Verdana display the same way on nearly all devices without extra setup.

Using the style attribute for a single element

The style attribute goes inside the opening tag of any HTML element. Write style="font-family: Arial;" to change that one element to Arial. Here's a real example:

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

The browser reads font-family: and then looks for the font name that follows. If you want a font name with a space in it—like "Times New Roman"—wrap it in quotes: style="font-family: 'Times New Roman';"

Use this method when you're changing the font of one or two elements. If you're changing dozens of paragraphs, the <style> tag is faster because you write the rule once instead of repeating it in every tag.

Using the <style> tag to change fonts across a page

The <style> tag goes in the <head> section of your HTML page, above the <body>. Inside it, you write rules that explore to all matching elements. Here's how:

This rule says: "Make every <p> tag on this page Verdana." You don't have to add anything to the individual <p> tags themselves. The browser finds them and applies the rule automatically.

You can write multiple rules in one <style> tag. For example, you could make all paragraphs Verdana and all headings Georgia:

This method is cleaner than the style attribute when you have many elements to change, because the rule lives in one place and you can edit it without touching the HTML tags themselves.

Using backup fonts so text always displays

Not every device has every font installed. If you tell the browser to use a font that doesn't exist on someone's computer, the browser falls back to a default font, which might not be what you want. To prevent that, list multiple fonts separated by commas, in order of preference:

style="font-family: Georgia, 'Times New Roman', serif;"

The browser tries Georgia first. If Georgia isn't available, it tries "Times New Roman". If that's not available, it uses whatever serif font the device has as a default. The last item—serif, sans-serif, or monospace—is a generic fallback that every browser understands.

This is why you'll often see font lists like Arial, Helvetica, sans-serif. Arial is the first choice, Helvetica is the backup if Arial isn't there, and sans-serif is the final safety net.

Web-safe fonts that work on almost all devices

Some fonts are installed on nearly every computer and phone. These are called web-safe fonts, and they display the same way whether someone is on Windows, Mac, or Linux. The most common ones are:

Arial (sans-serif)
Verdana (sans-serif)
Georgia (serif)
Times New Roman (serif)
Courier New (monospace)
Comic Sans MS (casual)

If you use only these fonts, you don't have to worry about a visitor's device not having what you specified. They'll see exactly what you designed. If you want to use a less common font, you'll need to use a web font service like Google Fonts, which requires additional setup—the browser downloads the font from the internet instead of looking for it on the device.

Combining font changes with other styles

You can change the font and other properties at the same time in a single style attribute or rule. For example:

<p style="font-family: Georgia; font-size: 18px; color: blue;">This text is Georgia, 18 pixels, and blue.</p>

Or in a <style> tag:

Each property goes on its own line (in the <style> tag) or is separated by a semicolon (in the style attribute). The browser applies all of them to the element.

When to use a separate CSS file instead

If you're building a website with many pages, writing <style> tags in every page's head gets repetitive. Instead, create a separate file called styles.css and write all your font rules there. Then link to it from every page:

Put this line in the <head> section of each HTML page. The browser reads the CSS file and applies those rules to every page that links to it. Now if you want to change a font across your entire site, you edit it in one place instead of in every page.

For a single page or a small project, the <style> tag is fine. For anything larger, a separate CSS file keeps your code organized and saves you time.

Frequently Asked Questions

What's the difference between font-family and font?

font-family changes only the typeface. font is a shorthand that can change the typeface, size, weight, and style all at once. For most purposes, font-family is what you want. Use font only if you're comfortable with the shorthand syntax.

Why does my font look different on someone else's computer?

The device doesn't have the font you specified installed. Always include backup fonts in your list, and end with a generic fallback like sans-serif or serif. If you need the exact same font everywhere, use a web font service like Google Fonts.

Can I use any font name I want?

You can write any font name, but the browser will only display it if that font is installed on the visitor's device. Stick to web-safe fonts (Arial, Georgia, Verdana, etc.) unless you're using a web font service. Font names with spaces must be in quotes.

Do I need to close the style tag?

Yes. Every <style> tag must have a closing </style> tag. The same is true for <p>, <h1>, and most other HTML tags. The style attribute doesn't need a closing tag because it's not a separate element.

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.