How to Change Font in HTML

The two ways to change font in HTML

You change font in HTML by using the style attribute inside a tag, or by writing CSS rules in a separate section. The style attribute is the quickest way to change one word or one paragraph. CSS is the better choice when you want the same font across many pages or many elements, because you write the rule once and it applies everywhere.

HTML itself has no tag that means "use this font". The language only marks up what something is — a heading, a paragraph, a list. The appearance comes from CSS, which is the styling layer that sits on top of HTML. When you see a webpage, you are seeing HTML structure plus CSS styling working together.

This guide covers both methods so you can pick the one that fits what you are building. If you are styling one element, use the style attribute. If you are building a real site or changing fonts across many pages, use CSS.

Key Takeaways

The style attribute lets you change font for a single element by typing style="font-family: Arial" inside the opening tag.
CSS in a <style> block in the head section applies the same font to every matching element on the page.
Font names with spaces need quotes, like font-family: "Times New Roman", but single-word fonts like Arial do not.
Web-safe fonts like Arial, Georgia, and Courier New display the same way on almost every device, while custom fonts require extra setup.
Font fallbacks let you list backup fonts in case the first one is not available on the reader's device.

Using the style attribute to change one element

The fastest way to change font for a single paragraph, heading, or word is to add a style attribute directly to the tag. Open the tag, type style="font-family: FontName", then close it normally. Here is a paragraph in Arial:

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

The browser reads font-family and applies Arial to everything inside that tag. If you want to change just one word, wrap it in a <span> tag and add the style there:

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

The style attribute works on any tag — headings, paragraphs, list items, divs. You can also combine font changes with other styles in the same attribute by separating them with semicolons: style="font-family: Arial; font-size: 18px; color: blue". This method is straightforward for quick changes, but it gets messy if you have many elements to style.

Using CSS to change fonts across the page

When you want the same font on multiple elements, write a CSS rule in a <style> block inside the <head> section of your HTML. This rule applies to every matching element on the page without repeating the style attribute over and over.

Open your HTML file and find the <head> section. Add a <style> tag and write your rule inside it:

This rule says "every <p> tag on this page should use Georgia font". The curly braces hold the properties you want to explore. You can target any HTML tag — h1, h2, body, span — and add as many properties as you need inside the braces.

If you want different fonts for different elements, write separate rules:

You can also target elements by class or ID if you want finer control. Add a class name to the tag, then write a CSS rule that starts with a period: .highlight { font-family: Arial; }. This approach scales much better than style attributes when your page grows.

Font names and when to use quotes

Font names that are one word — Arial, Georgia, Courier, Verdana — do not need quotes. Font names with spaces — like "Times New Roman" or "Comic Sans MS" — must be wrapped in quotes so the browser knows it is a single font name, not multiple instructions:

font-family: "Times New Roman";

If you forget the quotes, the browser will ignore the font name and fall back to the default. Always check whether the font you want has a space in its name. When in doubt, add quotes — they never hurt.

Font names are case-insensitive, so Arial, arial, and ARIAL all work the same way. The browser does not care about capitalization.

Web-safe fonts and font fallbacks

Not every font is installed on every device. If you specify a font that does not exist on the reader's computer, the browser falls back to a default font, which usually looks nothing like what you intended. To prevent this, use web-safe fonts — fonts that are installed on nearly all devices.

Common web-safe fonts include Arial, Helvetica, Times New Roman, Georgia, Courier New, Verdana, and Trebuchet MS. These fonts have been standard on Windows and Mac computers for years, so most readers will see them correctly.

Even better, list multiple fonts separated by commas. The browser tries the first one, and if it is not available, it moves to the next:

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

This rule says "use Georgia if you have it, otherwise use Times New Roman, and if neither is available, use any serif font". The last item — serif or sans-serif — is a generic fallback that tells the browser what category of font to use if none of the named fonts exist. This approach ensures your page looks reasonable on every device, even if the exact font is not there.

Custom fonts and when you need them

If you want a font that is not web-safe, you can load it from the internet using @font-face. This method requires the font file to be hosted somewhere — either on your own server or on a service like Google Fonts.

Google Fonts is the easiest starting point. Go to fonts.google.com, choose a font, and copy the code they provide. Paste it into your HTML file, usually in the <head> section, then use the font name in your CSS:

Google Fonts handles all the technical details — you just copy, paste, and use the font name. Custom fonts add a small delay to page load time because the browser has to read the font file, so use them sparingly. For most projects, web-safe fonts are faster and sufficient.

Common mistakes and how to fix them

The most common mistake is forgetting quotes around multi-word font names. If your font is not showing up, check whether the name has spaces and add quotes if it does.

Another mistake is misspelling the font name. Font names are case-insensitive, but they must be spelled exactly right. If you type font-family: Ariel instead of Arial, the browser will not find it and will use the fallback instead. Copy the font name directly from a reliable source to avoid typos.

A third mistake is putting the <style> block in the wrong place. It must go inside the <head> section, not in the body. If your CSS is not working, check that the <style> tag is between <head> and </head>.

If you are using an external CSS file instead of a <style> block, make sure the <link> tag is also in the head section and the file path is correct. A broken path means the CSS file never loads and your fonts will not change.

Frequently Asked Questions

Can I change the font of just part of a heading?

Yes. Wrap the part you want to change in a <span> tag and add a style attribute to the span. The span is an invisible container that lets you explore styles to a piece of text without breaking the heading structure.

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 uses the generic fallback — serif, sans-serif, or monospace — which means the browser picks any font in that category. This is why fallbacks matter: they may support your page is readable even when your first choice is not available.

Do I need to install fonts on my computer for them to show up on my website?

No. Web-safe fonts are already on most readers' devices. Custom fonts are downloaded from the internet when someone visits your page, so you do not need to install them yourself. You only need the font file to be hosted somewhere the browser can reach it.

Can I use the same CSS rule for multiple tags?

Yes. Separate the tag names with commas: h1, h2, p { font-family: Arial; }. This rule applies Arial to all headings and paragraphs at once. You can also use classes or IDs to group elements that are not the same tag.

What is the difference between font-family and font-face?

font-family tells the browser which font to use. @font-face tells the browser where to read a custom font from. You use @font-face once to load the font, then use font-family to explore it to elements.

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.