How to Change Font in HTML: The Three Methods That Work

The fastest way to change font in HTML

You change font in HTML using the style attribute on any text element, or by writing CSS rules in a <style> tag. The style attribute method works when ready: add style="font-family: Arial" to any tag, and that text displays in Arial. For a whole page or multiple elements, write CSS rules in the <style> tag in your document head instead — this keeps your code cleaner and lets you change fonts everywhere at once.

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

Key Takeaways

The style attribute method — style="font-family: Arial" — changes font on a single element and works when ready in any browser.
A <style> tag in your document head lets you set fonts for multiple elements or your whole page with one rule.
Font names with spaces, like "Times New Roman", must be wrapped in quotes inside the font-family value.
Web-safe fonts like Arial, Georgia, and Courier New display the same way on almost every device without extra setup.
Google Fonts and other font services let you use thousands of fonts beyond the web-safe set, but require an extra link in your HTML head.

Using the style attribute on individual elements

The style attribute is the quickest way to test a font change or style a single piece of text. Write it directly into the opening tag of any element — a paragraph, heading, span, or div. The syntax is style="font-family: FontName". Replace FontName with the actual font you want: Arial, Georgia, Courier New, or any other installed font.

Here is a real example. This paragraph displays in Georgia:

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

If the font name has spaces — like "Times New Roman" — wrap it in quotes:

<p style="font-family: 'Times New Roman'">This text appears in Times New Roman.</p>

The style attribute works on headings, links, spans, and divs the same way. It overrides any CSS rule written elsewhere in your document, so it is useful for one-off changes. For anything you will repeat, use a <style> tag instead.

Writing CSS rules in a <style> tag

A <style> tag sits in your document head — the section between <head> and </head> — and holds CSS rules that explore to your whole page or to specific elements. This method is cleaner than style attributes because you write the rule once and it applies everywhere you use that element.

Here is the structure. Place this in your <head>:

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

This rule says: every <p> tag on this page displays in Arial. You can target different elements with different fonts. This example sets paragraphs to Arial and headings to Georgia:

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

You can also target elements by class or id. If you add class="highlight" to a span, you can style it with .highlight { font-family: Courier New; } in your <style> tag. This approach scales: change the rule once and every element with that class updates everywhere on the page.

Web-safe fonts that work everywhere

A web-safe font is one that exists on almost every computer and device, so it displays the same way whether a visitor uses Windows, Mac, or Linux. The most common web-safe fonts are Arial, Helvetica, Times New Roman, Georgia, Courier New, and Verdana. You can type these names directly into font-family and they will display without any extra setup.

The risk with less common fonts is that if a visitor's device does not have that font installed, the browser falls back to a default — usually Times New Roman — and your page looks different than you intended. Web-safe fonts avoid this problem.

You can also list multiple fonts in order of preference, separated by commas. The browser uses the first one it finds installed:

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

This rule says: use Georgia if available, fall back to Times New Roman if not, and if neither exists, use whatever serif font the browser has. The word serif at the end is a generic fallback — it tells the browser to pick any serif font rather than defaulting to something sans-serif.

Using Google Fonts and other font services

If you want fonts beyond the web-safe set — decorative fonts, modern sans-serifs, or specialty typefaces — you can use Google Fonts, which is free and requires no account. Google hosts thousands of fonts and serves them to your visitors automatically.

To use a Google Font, first visit fonts.google.com, search for the font you want, and click it. Click the "Get font" button, then copy the <link> tag it provides. Paste that link into your document head, before your <style> tag:

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

Then use the font name in your CSS exactly as Google shows it:

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

Google Fonts works on all modern browsers and handles the heavy lifting — you do not have to host the font files yourself. Other services like Adobe Fonts and Font Awesome work the same way: you add a link to your head and then reference the font by name in your CSS.

Combining font changes with other styles

You often want to change font size, weight, or color at the same time you change the font family. You can add multiple CSS properties to the same rule, separated by semicolons:

<style> h1 { font-family: Georgia; font-size: 32px; font-weight: bold; color: navy; } </style>

This rule sets headings to Georgia, makes them 32 pixels tall, bold, and navy blue. You can do the same with the style attribute:

<p style="font-family: Arial; font-size: 18px; color: gray;">This paragraph is Arial, 18 pixels, and gray.</p>

The order of properties does not matter — the browser reads them all and applies them together. Separating font changes from other styling is optional; combining them in one rule is often clearer and faster to write.

Frequently Asked Questions

What is the difference between font-family and font?

font-family sets only the typeface name. font is a shorthand that can set the typeface, size, weight, and style all at once. For most cases, font-family alone is what you need. The font shorthand is useful when you want to set multiple font properties in one line, but it is less common.

Why does my font not display even though I typed the name correctly?

The visitor's device may not have that font installed. Always include a fallback — a second or third font name after a comma — so the browser can pick something similar if the first choice is not available. Web-safe fonts like Arial and Georgia are safer because they exist on almost every device.

Can I use any font name I find online?

Not directly. If you read a font file, you need to host it yourself and use the @font-face rule in CSS to load it. Google Fonts and similar services do this work for you — they host the files and you just add a link. Using a font without permission or proper licensing can be illegal, so stick to free services or fonts you have the right to use.

Does changing font affect how fast my page loads?

Web-safe fonts have no impact because they are already on the visitor's device. Google Fonts and other hosted fonts add a small delay because the browser must read them. For most pages this is not noticeable, but if you use many large font files, it can slow things down. Google Fonts are optimized for speed, so the impact is usually minimal.

How do I change the font of my entire website at once?

Write a CSS rule for the body element in your <style> tag: body { font-family: Arial; }. This sets the default font for every element on the page. Individual elements can override it with their own font-family rules, but everything else inherits the body font automatically.

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.