How to Change Font Type in HTML

The Three Ways to Set a Font in HTML

You change font type in HTML using the CSS font-family property. HTML itself has no tag that changes fonts — the language only marks up what text is, not how it looks. All font styling happens in CSS, either written inside a style attribute on a single element, inside a <style> tag in the page head, or in a separate CSS file.

The simplest method is to add style="font-family: Arial;" directly to any HTML tag. For a whole page, put your font rules in a <style> block at the top. For a site with many pages, write the rules once in a .css file and link it to every page.

Key Takeaways

Font changes happen in CSS using the font-family property, not in HTML tags themselves.
You can style a single element by adding style="font-family: FontName;" directly to the tag.
A <style> block in the page head applies fonts to multiple elements at once using selectors like p or .classname.
Always list multiple font names separated by commas, with a generic fallback like sans-serif or serif at the end in case the first choice is not available.
Web-safe fonts like Arial, Georgia, and Times New Roman work on almost all devices; custom fonts require a @import or <link> to load them from a service like Google Fonts.

Inline Styles: Changing Font on One Element

The quickest way to change a single paragraph or heading is to add a style attribute directly to the tag. Write the font name inside the font-family property, like this:

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

If the browser does not have Georgia installed, it will fall back to the next font in the list. Always end with a generic family name — serif, sans-serif, or monospace — so the text does not disappear:

<p style="font-family: Georgia, serif;">This paragraph uses Georgia, or any serif font if Georgia is missing.</p>

Inline styles work for quick fixes, but they become hard to manage if you need the same font on many elements. For that, use a <style> block instead.

Using a Style Block for Multiple Elements

A <style> tag in the <head> section of your page lets you set fonts for whole groups of elements at once. Put it between the <head> tags, before the closing </head>:

<head> <style> p { font-family: Arial, sans-serif; } h1 { font-family: Georgia, serif; } </style> </head>

This rule makes every <p> tag use Arial, and every <h1> tag use Georgia. You can also target elements by class or ID. If you give a paragraph the class highlight, you can style only that class:

Then use it like this: <p class="highlight">This paragraph uses Courier New.</p>

Web-Safe Fonts That Work Everywhere

Web-safe fonts are installed on nearly all computers and phones, so they display the same way for almost every visitor. The most common are Arial, Helvetica, Times New Roman, Georgia, Courier New, and Verdana. These fonts have been standard for decades and are safe choices if you want predictable results.

When you list a font, always pair it with a fallback from the same family. If you want a sans-serif look, use Arial, Helvetica, sans-serif. If you want serif, use Georgia, "Times New Roman", serif. Notice that font names with spaces go inside quotes.

Web-safe fonts are plain and professional, but they are also common. If you want a more distinctive look, you will need to load a custom font from a service like Google Fonts.

Loading Custom Fonts from Google Fonts

Google Fonts is a free library of thousands of fonts you can load into your page. Go to fonts.google.com, search for a font you like, and click it. On the font page, click the plus button to select it, then click the "View your selected families" box at the bottom right.

You will see two ways to use the font: a <link> tag to paste in your <head>, and a CSS rule to paste in your <style> block. Copy both and paste them into your page. The <link> goes in the <head>:

Then use the font name in your CSS:

Google Fonts loads the font from their servers when someone visits your page, so it works even if the visitor does not have that font installed locally. Always include a fallback font at the end, in case the Google Fonts server is slow or unreachable.

External CSS Files for Sites With Many Pages

If you have more than one page, writing the same <style> block on every page is repetitive and hard to update. Instead, create a separate file called style.css and write all your font rules there. Then link that file to every page using a <link> tag in the <head>:

Inside style.css, write your rules without the <style> tags:

p { font-family: Arial, sans-serif; } h1 { font-family: Georgia, serif; } .highlight { font-family: Courier New, monospace; }

Now every page that links to style.css will use the same fonts. If you want to change a font later, you change it once in the CSS file, and all pages update automatically.

Common Mistakes and How to Avoid Them

The most common mistake is forgetting a fallback font. If you write font-family: "Some Rare Font"; and the visitor does not have that font, the browser will pick a default, which is usually not what you want. Always end with serif, sans-serif, or monospace.

Another mistake is forgetting quotes around font names with spaces. font-family: Times New Roman; will not work — it must be font-family: "Times New Roman"; or font-family: 'Times New Roman';. Single and double quotes both work.

A third mistake is mixing HTML and CSS. You might see old code that uses a <font> tag, like <font face="Arial">. This tag is obsolete and does not work in modern browsers. Always use CSS instead.

Frequently Asked Questions

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

font-family tells the browser which font to use for text. font-face is a CSS rule that loads a custom font file from your server or a service like Google Fonts. You use font-face once to load the font, then font-family to explore it to elements.

Can I use any font I find online?

Not all fonts are free to use on the web. Some require a license. Google Fonts, Font Awesome, and DaFont all offer fonts you can use freely. Always check the license before downloading a font from another site. If you own a font file, you can load it with @font-face, but make sure you have the right to use it on the web.

Why does my custom font not show up?

The most common reason is a broken link. If you are loading a font from Google Fonts or your own server, check that the URL in the <link> tag is correct. Also make sure the <link> tag is in the <head>, not in the <body>. If the font still does not load, check your browser's developer tools (press F12) to see if there are any error messages.

Should I use many different fonts on one page?

Using more than two or three fonts usually makes a page look messy and unprofessional. A common pattern is one font for headings and another for body text. If you use custom fonts from Google Fonts, each one adds a small delay to page load time, so use as few as you need.

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.