How to Change a Font in HTML

The Three Ways to Change Fonts in HTML

You change a font in HTML by adding a style attribute to a tag, using a <style> block in your page's head section, or linking to an external stylesheet. The style attribute is fastest for one or two words. A style block works when you want to set the same font for many tags at once. An external stylesheet is the professional approach when you're building a real website.

HTML itself has no font tag anymore — that stopped working around 2000. Everything now goes through CSS, which is the language that controls how things look. The good news is that CSS for fonts is straightforward: you write one line, and it works.

Key Takeaways

The style attribute method works when ready: add style="font-family: Arial" directly inside any opening tag.
A style block in the <head> section lets you set one font for all paragraphs, headings, or other tags at once without repeating code.
Font names with spaces (like "Times New Roman") must be wrapped in quotes, and you should always list a backup font in case the first one doesn't load.
Web-safe fonts like Arial, Georgia, and Courier New work on almost every computer; custom fonts require a link to a service like Google Fonts.
The order matters: write font-family first, then the font name, then a semicolon, with no special characters except hyphens and spaces inside quotes.

Using the Style Attribute for a Single Word or Phrase

The fastest way to change one word is to wrap it in a <span> tag and add a style attribute. A span is an invisible container that holds text and lets you style it without breaking the sentence.

Here's the real code:

<p>This is normal text, but <span style="font-family: Georgia">this word is Georgia</span>.</p>

When you open this in a browser, the word "this word is Georgia" appears in Georgia font, and the rest stays in whatever the default is. The style attribute goes inside the opening tag, after the tag name, with an equals sign and quotes around the value.

If the font name has spaces in it — like "Times New Roman" — put the whole name in quotes: style="font-family: 'Times New Roman'". If you use a font name with no spaces, quotes are optional but safe to add anyway.

Changing the Font for a Whole Paragraph or Heading

To change the font of an entire paragraph or heading, add the style attribute to the opening tag of that paragraph or heading. This works exactly the same way as the span method, but you're styling a bigger block.

<h2 style="font-family: Arial">This Heading Is Arial</h2>

<p style="font-family: Georgia">This whole paragraph is Georgia. Every word in it will be Georgia unless you override it with another style attribute inside.</p>

This approach is fine for one or two paragraphs. If you have ten paragraphs and you want them all in the same font, typing the style attribute ten times is tedious and hard to change later. That's when a style block becomes useful.

Using a Style Block to Set One Font for Many Tags

A style block goes in the <head> section of your HTML page, before the <body> tag. Inside it, you write rules that explore to all tags of a certain type. This way, you set the font once and it applies everywhere.

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

This rule says: "Every <p> tag on this page is Georgia." You don't add anything to the individual paragraph tags — they just inherit the style from the block. If you later want to change all paragraphs to Arial, you change one line in the style block instead of ten lines in the HTML.

You can add multiple rules in one style block. Here's a real example:

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

Now all paragraphs are Georgia, and all h2 and h3 headings are Arial. If you want to override one specific paragraph, you can still add a style attribute to just that tag, and it will win over the style block.

Adding a Backup Font and Using Web-Safe Fonts

Not every computer has every font installed. If you tell a browser to use a font that doesn't exist on the reader's machine, the browser picks a default instead — usually Times New Roman — and your page looks wrong. To prevent this, always list a backup font after your first choice.

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

This says: "Use Georgia if you have it. If not, use Times New Roman. If you don't have that either, use whatever serif font you do have." The browser tries them in order and stops at the first one it finds. The last option — serif, sans-serif, or monospace — is a generic fallback that every browser understands.

Web-safe fonts are fonts that come built into Windows, Mac, and Linux. They include Arial, Helvetica, Georgia, Times New Roman, Courier New, and Verdana. These fonts work on almost every computer without any extra setup. If you use a font that's not web-safe — like Playfair Display or Roboto — you need to link to it from a service like Google Fonts, or it won't show up on your readers' screens.

Using Google Fonts for Custom Fonts

Google Fonts is a free library of thousands of fonts that work on any computer. To use one, you add a link in your <head> section and then reference the font by name in your CSS.

Go to fonts.google.com, search for a font you like, and click it. On the font page, click the blue "Get font" button, then click "Get embed code." Google gives you a line of code that looks like this:

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">

Paste this line into your <head> section. Then use the font name in your CSS exactly as Google shows it:

<head><link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"><style>h1 { font-family: 'Playfair Display', serif; }</style></head>

Now your h1 headings use Playfair Display, and if it doesn't load for some reason, they fall back to a generic serif font. Google Fonts are reliable and load fast, so this is the standard way to use custom fonts on a real website.

Common Mistakes and How to Fix Them

The most common mistake is forgetting quotes around a font name with spaces. font-family: Times New Roman does not work. It must be font-family: 'Times New Roman' or font-family: "Times New Roman". Single and double quotes both work — pick one and stick with it.

Another mistake is putting the style attribute in the wrong place. It goes inside the opening tag, after the tag name: <p style="font-family: Arial">, not <p> style="font-family: Arial". The equals sign and quotes are part of the tag itself.

A third mistake is forgetting the semicolon at the end of the style value. style="font-family: Arial" works, but if you add more styles, the semicolon becomes required: style="font-family: Arial; color: red;". It's safer to always include it.

Finally, if a custom font from Google Fonts doesn't appear, check that the link is in your <head> section and that the font name in your CSS matches exactly what Google gave you. Font names are case-sensitive, so "Playfair Display" is different from "playfair display".

Frequently Asked Questions

Can I use any font I want, or are there limits?

You can use any font, but if it's not web-safe or from a service like Google Fonts, your readers won't see it. Web-safe fonts (Arial, Georgia, Times New Roman, Courier New, Verdana) work everywhere. For anything else, use Google Fonts or another web font service. Custom fonts from your computer won't work for other people.

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

Font-family is the name of the font (Arial, Georgia, etc.). Font-size is how big it is (12px, 16px, etc.). You can change both in the same style: style="font-family: Arial; font-size: 18px". They're separate properties that work together.

Do I have to use a style block, or can I always use the style attribute?

You can use either. The style attribute is faster for one or two tags. A style block is cleaner and easier to maintain if you have many tags with the same font. For a real website, an external stylesheet (a separate CSS file) is the professional standard, but that's beyond the scope of changing fonts.

What happens if I list multiple fonts and none of them exist?

The browser falls back to its default font, usually Times New Roman. That's why the last item in your list should always be a generic fallback like serif, sans-serif, or monospace. This guarantees the text will display in something readable, even if none of your chosen fonts are available.

Can I change the font of just one letter?

Yes. Wrap that letter in a <span> tag and add a style attribute: <span style="font-family: Arial">A</span>. The span is invisible and holds just that one letter, so you can style it separately from the rest of the text.

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.