How to Change Font in HTML

The Three Ways to Change Font in HTML

You change font in HTML by using the CSS font-family property, which tells the browser which typeface to display. You can set it inline on a single element, in a style block at the top of your page, or in a separate CSS file that controls your whole site. The method you choose depends on whether you are styling one word, one page, or many pages.

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

Key Takeaways

The font-family property in CSS is the standard way to change typeface; you list fonts in order of preference, separated by commas.
Inline styles work for a single element: style="font-family: Arial;" goes inside the opening tag.
A <style> block in the <head> section controls all matching elements on one page.
Web-safe fonts like Arial, Georgia, and Times New Roman display the same way on almost all devices without extra setup.
Google Fonts and other services let you use thousands of custom typefaces by linking to them in your <head>.

Inline Styles: Changing Font on One Element

The fastest way to change a single word or paragraph is to add a style attribute directly to the HTML tag. Open the tag, type style="font-family: FontName;", and close it. The browser reads this instruction and applies it only to that element.

Here is a real example. If you have a paragraph tag and want the text inside to be Georgia:

<p style="font-family: Georgia;">This text will display in Georgia.</p>

If you want to change a heading to Arial:

<h1 style="font-family: Arial;">My Page Title</h1>

This method works when ready and does not require any other setup. The downside is that if you have ten paragraphs and want them all in Georgia, you have to type the style attribute ten times. For larger changes, a style block is faster.

Style Blocks: Controlling a Whole Page at Once

A style block sits in the <head> section of your HTML page and sets the font for every matching element on that page. You write a rule once, and it applies to all paragraphs, all headings, or all elements with a certain class name.

Here is the structure. In your <head>, add this:

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

Now every <p> tag on that page displays in Georgia. You do not add anything to the individual tags. If you want headings in a different font, add another rule:

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

You can also target elements by class. If you have paragraphs with class="intro", you can style only those:

<style>.intro { font-family: Verdana; }</style>

Style blocks are cleaner than inline styles when you have many elements to change. They also make it easier to update later — change the rule once, and every element updates automatically.

External CSS Files: Controlling Multiple Pages

If you have a whole website with many pages, you can create one CSS file and link it to every page. Then one font change updates your entire site at once. This is how professional websites stay consistent.

Create a file called styles.css (or any name you choose) and put your font rules in it:

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

Then in the <head> of every HTML page, add a link to that file:

<link rel="stylesheet" href="styles.css">

The browser downloads the CSS file and applies those rules to every page that links to it. If you later decide all paragraphs should be Verdana instead of Georgia, you change it once in styles.css, and every page on your site updates.

Web-Safe Fonts That Work Everywhere

Some fonts are installed on almost every computer and device. These web-safe fonts display the same way whether someone visits your site on Windows, Mac, or a phone. The most common are Arial, Verdana, Georgia, Times New Roman, and Courier New.

When you type a font name in CSS, the browser looks for it on the user's device. If it is not there, the browser falls back to a default font, which may not be what you intended. To prevent this, list multiple fonts in order of preference, separated by commas. The browser tries the first one, and if it is not found, moves to the next:

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

In this example, the browser tries Georgia first. If the user does not have Georgia, it tries Times New Roman. If neither is found, it uses whatever serif font the browser has as a default. The word serif at the end is a generic fallback — it tells the browser "use any serif font you have."

The generic fallbacks are serif, sans-serif, monospace, cursive, and fantasy. Always end your font list with one of these so the page never looks broken.

Using Google Fonts and Custom Typefaces

If web-safe fonts feel plain, you can use Google Fonts, a free library of thousands of typefaces. The browser downloads the font from Google's servers, so it displays the same way on every device, even if the user does not have it installed.

Go to fonts.google.com, browse or search for a font you like, and click it. On the font page, click the plus icon to select it. A panel appears on the right side. Click "View your selected families" to see the code you need.

Google gives you two lines of code. The first is a <link> tag that goes in your <head>:

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

The second is the CSS rule that uses it:

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

Paste both into your page, and the font works. Google Fonts are free and do not require an account. The downside is that the browser has to read the font file, which takes a moment on slow connections. For most sites, this delay is not noticeable.

Common Mistakes to Avoid

The most common error is forgetting the semicolon at the end of the CSS rule. font-family: Arial without a semicolon will not work. Always end with ;

Another mistake is using a font name that does not exist or is misspelled. If you type font-family: Ariel; instead of Arial, the browser will not find it and will use the default font instead. Check the spelling carefully, especially with custom fonts from Google Fonts.

If you use a font name with spaces in it, wrap it in quotes: font-family: "Times New Roman"; Without quotes, the browser reads it as multiple fonts and gets confused.

Finally, do not rely on a single font without a fallback. Always end your font list with a generic fallback like serif or sans-serif. This ensures your page stays readable even if the primary font fails to load.

Frequently Asked Questions

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

Serif fonts have small lines at the ends of letters — Georgia and Times New Roman are serifs. Sans-serif fonts do not have these lines — Arial and Verdana are sans-serif. Serifs are often used for body text in printed books because they are straightforward to read in long passages. Sans-serif fonts look cleaner on screens and are common for web headings.

Can I use any font name I want in CSS?

You can type any font name, but the browser will only display it if the font is installed on the user's device or loaded from a service like Google Fonts. If the font is not available, the browser skips to the next font in your list. Always include a generic fallback at the end so your page does not break.

Do Google Fonts slow down my website?

Google Fonts add a small delay because the browser has to read the font file. For most visitors on normal internet speeds, this delay is less than a second and is not noticeable. If speed is critical, stick to web-safe fonts that are already on the user's device.

How do I change the font size at the same time as the typeface?

Use the font-size property in the same style rule. For example: p { font-family: Georgia; font-size: 18px; } This sets both the typeface and the size. You can also use em or rem instead of pixels for sizes that scale with the rest of your page.

What if I want different fonts for different paragraphs?

Give each paragraph a different class name and write a separate CSS rule for each class. For example, <p class="intro"> and <p class="body">, then write .intro { font-family: Arial; } and .body { font-family: Georgia; } in your style block.

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.