How to Change Font in HTML
What you’ll build or solve
You’ll change the font of text on a full page or specific elements using CSS.
When this approach works best
Changing the font works best when you:
Learn HTML on Mimo
- Apply brand typography across an entire site.
- Use a different font for headings and body text.
- Load a custom Google Font for marketing pages.
- Improve readability by switching to a cleaner typeface.
This approach is a bad idea if you rely on the deprecated <font> tag or scatter inline styles across a large project.
Prerequisites
- A code editor
- A browser
- Basic understanding of HTML and CSS selectors
No additional setup is required.
Step-by-step instructions
Step 1: Change the font for the whole page
Use the font-family property on the body element to apply a font site-wide.
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Font example</title>
<style>
body {
font-family:Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This page uses a new font.</p>
</body>
</html>
Always provide fallback fonts. If the first font is not available, the browser moves to the next one. End your stack with a generic family such as serif, sans-serif, or monospace.
Example of a longer stack:
CSS
body {
font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
What to look for:
If the font does not change, confirm the font name is spelled correctly and installed on your system.
Step 2: Change the font for specific elements with classes
Use classes when you want different fonts for headings, sections, cards, or any container.
JavaScript
<h1class="headline">Main title</h1>
<sectionclass="promo">
<h2>Special offer</h2>
<p>Limited time deal.</p>
</section>
<style>
.headline {
font-family:Georgia,serif;
}
.promo {
font-family:"Courier New",monospace;
}
</style>
This technique works for any element type. You control the target using selectors, not the tag itself.
Step 3: Load a Google Font for custom typography
System fonts are limited. If you want a specific typeface, load it from Google Fonts.
Option A: Add a <link> in <head> (recommended)
JavaScript
<head>
<linkrel="preconnect"href="https://fonts.googleapis.com">
<linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"rel="stylesheet">
<style>
body {
font-family:"Inter",sans-serif;
}
</style>
</head>
Option B: Import inside CSS
CSS
<style>
@importurl("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
body {
font-family:"Inter",sans-serif;
}
</style>
Use the <link> method for better performance in production projects.
What to look for:
If the font does not load, confirm the font name matches exactly and check DevTools for failed network requests.
Step 4: Use inline styles for quick tests
Inline styles work for one-off changes or quick prototypes.
CSS
<pstyle="font-family:Verdana,sans-serif;">
Temporary font change
</p>
If you reuse the same style, move it into a class:
<pclass="custom">First</p>
<pclass="custom">Second</p>
<style>
.custom {
font-family:Verdana,sans-serif;
}
</style>
Examples you can copy
Example 1: Clean modern layout
JavaScript
<bodyclass="app">
<h1>Dashboard</h1>
<p>Overview of metrics.</p>
</body>
<style>
.app {
font-family:"Segoe UI",Roboto,sans-serif;
}
</style>
Example 2: Different font for headings and body
CSS
<h1>Article Title</h1>
<p>This is body content.</p>
<style>
body {
font-family:Arial,sans-serif;
}
h1 {
font-family:Georgia,serif;
}
</style>
This creates contrast between titles and paragraphs.
Example 3: Google Font with weights
JavaScript
<head>
<linkhref="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap"rel="stylesheet">
<style>
body {
font-family:"Poppins",sans-serif;
font-weight:300;
}
h1 {
font-weight:600;
}
</style>
</head>
This example shows how to control both font and weight.
Common mistakes and how to fix them
Mistake 1: Using the old <font> tag
What you might do
<fontface="Arial">Text</font>
Why it breaks
The <font> tag is deprecated and mixes structure with styling.
Fix
JavaScript
<spanclass="styled">Text</span>
<style>
.styled {
font-family:Arial,sans-serif;
}
</style>
Mistake 2: Forgetting fallback fonts
What you might do
CSS
body {
font-family:"CustomFont";
}
Why it breaks
If the font fails to load or is not installed, the browser has no alternative.
Fix
CSS
body {
font-family:"CustomFont",Arial,sans-serif;
}
Mistake 3: Misspelling the font name
What you might do
CSS
body {
font-family:"Interr",sans-serif;
}
Why it breaks
The browser cannot find the font and silently falls back.
Fix
Copy the exact name from your font provider.
Troubleshooting
If the font does not change, confirm your selector targets the correct element.
If a Google Font does not load, check the Network tab in DevTools for failed requests.
If the wrong font displays, verify spelling and quotation marks.
If styles seem overridden, inspect the element and check which font-family rule wins.
If the font loads but looks unchanged, confirm the loaded font-weight matches your CSS.
Quick recap
- Use
font-familyto change fonts in HTML. - Apply it to
bodyfor site-wide typography. - Use classes to style specific elements.
- Load custom fonts with
<link>or@import. - Always include fallback fonts in your stack.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot