How to Change Fonts in HTML

The three ways to set a font in HTML

You change fonts in HTML by using the CSS font-family property, either inline in a style attribute, in a <style> tag, or in a separate CSS file. HTML itself has no font tag that works in modern browsers — the old <font> tag is obsolete. Every method that works today routes through CSS.

The simplest approach for a single element is inline styling: add style="font-family: Arial;" to any tag. For multiple elements or an entire page, a <style> block in the <head> section is cleaner. For a website with many pages, a separate CSS file linked in the head keeps your HTML readable and your fonts consistent everywhere.

Font names with spaces — like "Times New Roman" — must be wrapped in quotes. If the font is not installed on the reader's computer, the browser falls back to the next font in your list, so always end with a generic fallback like serif, sans-serif, or monospace.

Key Takeaways

Use the CSS font-family property inside a style attribute, <style> tag, or external CSS file — HTML has no working font tag in modern browsers.
Inline styles work for single elements: <p style="font-family: Georgia;"> changes that paragraph only.
A <style> block in the <head> applies fonts to multiple elements using selectors like p { font-family: Georgia; }.
Always list multiple fonts separated by commas, ending with a generic fallback like serif or sans-serif, so the page displays even if your chosen font is not installed.
Font names containing spaces must be wrapped in quotes: "Times New Roman", not Times New Roman.

Inline styles for a single element

The quickest way to change one element's font is to add a style attribute directly to the tag. Open the tag, type style="font-family: FontName;", and close it normally. The browser reads the style attribute and applies that font only to that element.

Here is a paragraph in Arial and a heading in Georgia:

<p style="font-family: Arial;">This paragraph uses Arial.</p> <h1 style="font-family: Georgia;">This heading uses Georgia.</h1>

Inline styles are fast for testing or one-off changes, but they clutter your HTML and make updates tedious if you later want to change the font on ten paragraphs — you have to edit each one separately. For anything beyond a single element, use a <style> block instead.

Using a style block in the head

A <style> tag in the <head> section lets you set fonts for multiple elements at once using CSS selectors. Write the selector (like p for all paragraphs or .highlight for a class), then the property inside curly braces.

Here is a complete example:

<!DOCTYPE html> <html> <head> <style> p { font-family: Verdana; } h1 { font-family: Georgia; } .special { font-family: "Courier New"; } </style> </head> <body> <h1>Main Title</h1> <p>This paragraph is Verdana.</p> <p class="special">This one is Courier New.</p> </body> </html>

The <style> block approach scales better than inline styles. If you decide later that all paragraphs should be Tahoma instead of Verdana, you change one line in the style block and every paragraph updates automatically. You can also use class selectors (like .special) to apply fonts to specific groups of elements without touching the HTML tags themselves.

Linking to an external CSS file

For a website with multiple pages, store your CSS in a separate file and link it from each HTML page. This keeps your HTML clean, makes fonts consistent across the whole site, and lets you update all fonts from one place.

Create a file called styles.css and write your font rules inside it:

p { font-family: Verdana; } h1 { font-family: Georgia; } .special { font-family: "Courier New"; }

Then link it in the <head> of your HTML file:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Main Title</h1> <p>This paragraph is Verdana.</p> </body> </html>

The href attribute points to your CSS file. If the file is in the same folder as your HTML, just use the filename. If it is in a subfolder, use a path like css/styles.css. External CSS files are the standard for any real website because they separate content from styling and make maintenance much faster.

Font fallbacks and web-safe fonts

Not every font is installed on every computer. If you specify a font that the reader does not have, the browser falls back to the next font in your list. Always provide a fallback chain ending with a generic family.

A good font stack looks like this:

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

The browser tries Georgia first. If that is not installed, it tries Times New Roman. If that is also missing, it uses whatever serif font the system has as a default. The generic families — serif, sans-serif, monospace, cursive, and fantasy — are always available.

Common web-safe fonts that exist on most computers include Arial, Verdana, Times New Roman, Georgia, Courier New, and Comic Sans MS. If you want more control over which exact font displays, use Google Fonts or another web font service — they host the font file on their servers, and you link it in your HTML so the browser downloads it instead of relying on the user's system.

Using Google Fonts for more options

Google Fonts is a free library of thousands of fonts hosted by Google. Instead of hoping the reader has your chosen font installed, you link to Google's servers and the font downloads automatically when the page loads.

Visit fonts.google.com, search for a font, click it, and click the "Get font" button. Google shows you a link tag to paste into your HTML <head>:

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

Then use that font name in your CSS:

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

Google Fonts works on every modern browser and adds only a small amount of loading time. The trade-off is that the font downloads from Google's servers instead of being stored locally, so the page is slightly slower on first load. For most websites, the visual improvement is worth it.

Frequently Asked Questions

Can I use the old <font> tag to change fonts?

No. The <font> tag was removed from HTML5 and no modern browser supports it. You must use CSS with the font-family property instead, either inline, in a <style> block, or in an external CSS file.

What happens if I list a font that does not exist?

The browser skips it and moves to the next font in your list. If none of the fonts exist, it falls back to the generic family at the end — usually a serif or sans-serif font built into the operating system. This is why ending your font stack with a generic family is important.

Do I need quotes around all font names?

Only if the font name contains spaces or special characters. Arial does not need quotes, but "Times New Roman" and "Courier New" do. It is safe to use quotes around all font names even if they do not need them.

How do I change the font size along with the font family?

Use the font-size property in the same style or CSS rule. For example: style="font-family: Arial; font-size: 18px;" or in CSS: p { font-family: Arial; font-size: 18px; }. Font sizes can be in pixels (px), ems (em), or percentages (%).

Is it better to use inline styles or a style block?

A <style> block or external CSS file is better for anything beyond a single element. Inline styles are harder to maintain and make your HTML messy. Reserve inline styles for quick tests or one-off exceptions to your main stylesheet.

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.