Learning how to change font in html is one of the first design skills most beginners want to master. A website can have the right content, layout, and images, but if the text looks plain, too small, or hard to read, the whole page feels unfinished. Fonts shape the personality of a webpage and make content easier to scan.
The confusing part is that many beginners search for an HTML-only solution and find old examples using the <font> tag. That method is outdated. Modern websites use CSS to control fonts, sizes, weights, styles, colours, spacing, and custom web fonts. HTML gives structure to the content, while CSS controls how that content looks.
This guide explains the correct way to change fonts in HTML using CSS. You will learn inline CSS, internal CSS, external stylesheets, Google Fonts, custom font files, font size, font weight, font style, and font colour. You will also see practical code examples and common mistakes to avoid.
By the end, you will understand the difference between simply changing text appearance and building a clean, maintainable typography system for a webpage.
Change Font in HTML the Modern Way
The best way to change font in HTML is to use CSS. HTML describes what the content is, while CSS describes how the content looks. That separation keeps your code cleaner and makes it much easier to update a full website later.
For example, this is a simple HTML paragraph:
<p>This is a paragraph.</p>
To change its font, you can add CSS:
<p style="font-family: Arial, sans-serif;">This is a paragraph.</p>
This works, but it is not always the best long-term method. Inline CSS is fine for quick testing or one small example, but it becomes messy when used across many pages. If you want your whole site to use the same font, you should use CSS in a stylesheet.
A better approach is:
p { font-family: Arial, sans-serif; }
This tells the browser to show all paragraph text in Arial. If Arial is not available, the browser can use a generic sans serif font.
The most important CSS property for changing fonts is font-family. It lets you list one or more fonts in order of preference.
Example:
font-family: "Helvetica Neue", Arial, sans-serif;
This means the browser should try Helvetica Neue first. If that font is not available, it tries Arial. If Arial is not available, it uses any available sans serif font.
This fallback system matters because not every visitor has the same fonts installed. A Windows user, Mac user, Android user, and iPhone user may all have different system fonts. Good CSS gives the browser safe alternatives.
You can change fonts for the whole page, one section, a heading, a paragraph, a button, or any specific class. That flexibility is why CSS is the correct method for modern HTML font styling.
Change Font in HTML Step by Step
There are several ways to apply CSS font styles to HTML. Beginners usually start with inline CSS, then move to internal CSS, and finally use external stylesheets for cleaner website projects.
Method 1: Change Font with Inline CSS
Inline CSS is added directly to an HTML element using the style attribute.
Example:
<h1 style="font-family: Georgia, serif;">Welcome to My Website</h1>
This changes only that one heading. It is quick and easy, but it is not ideal for large websites because every element must be edited manually.
Use inline CSS when you are learning, testing, or making a one-off change. Avoid using it as your main website styling method.
Method 2: Change Font with Internal CSS
Internal CSS is placed inside a <style> tag, usually in the <head> area of the HTML document.
Example:
<style>body {font-family: Arial, sans-serif;}h1 {font-family: Georgia, serif;}</style>
This is cleaner than inline CSS because you can control multiple elements from one place. It works well for small pages, demos, practice files, and simple landing pages.
Method 3: Change Font with External CSS
External CSS is the best option for most websites. You create a separate CSS file, such as style.css, and link it to your HTML file.
HTML:
<link rel="stylesheet" href="style.css">
CSS:
body {font-family: Arial, sans-serif;}
This method is easier to manage because you can update fonts across the whole website by editing one CSS file. It also keeps your HTML cleaner.
Method 4: Change Font for a Specific Class
You can target a specific class when you want only part of the page to use a different font.
HTML:
<p class="intro-text">This is intro text.</p>
CSS:
.intro-text {font-family: Georgia, serif;}
This is useful for hero sections, quotes, buttons, cards, blog introductions, or special content blocks.
Method 5: Change Font for the Whole Website
To change the main font across the entire webpage, apply font-family to the body.
CSS:
body {font-family: "Inter", Arial, sans-serif;}
Then you can style headings separately if needed:
h1, h2, h3 {font-family: Georgia, serif;}
This gives your site a simple typography system: one font for body text and another font for headings.
Using Google Fonts and Custom Fonts in HTML
System fonts are useful, but many websites use web fonts for a more unique design. A web font is loaded from an online source or from your own website files, so visitors do not need to have the font installed on their device.
Google Fonts is one of the easiest ways for beginners to add web fonts to HTML. You choose a font, copy the provided link, place it in your HTML, and then use the font name in CSS.
Example Google Fonts setup:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
Then use it in CSS:
body {font-family: "Poppins", Arial, sans-serif;}
This loads Poppins and uses Arial as a fallback.
You can also use custom font files with @font-face. This is useful when you have licensed font files and want to host them yourself.
Example:
@font-face {font-family: "MyCustomFont";src: url("fonts/my-custom-font.woff2") format("woff2");font-weight: 400;font-style: normal;font-display: swap;}
Then apply it:
body {font-family: "MyCustomFont", Arial, sans-serif;}
The font-display: swap; rule is commonly used because it lets the browser show fallback text while the custom font loads. This can improve the user experience because visitors are not left staring at invisible text.
When using custom fonts, keep performance in mind. Loading too many font families and weights can slow down a page. A simple site usually does not need ten font weights. Most websites work well with regular, medium, semi-bold, and bold.
Changing Font Size, Weight, Style, and Colour
Changing the font family is only one part of HTML text styling. CSS also lets you control size, weight, style, colour, spacing, and line height. These properties work together to make text readable and visually balanced.
To change font size, use font-size.
Example:
p {font-size: 18px;}
Pixels are easy for beginners, but many modern websites use rem because it scales better with browser and accessibility settings.
Example:
p {font-size: 1rem;}
h1 {font-size: 3rem;}
To make text bold, use font-weight.
Example:
strong {font-weight: 700;}
To make text italic, use font-style.
Example:
em {font-style: italic;}
To change text colour, use color.
Example:
p {color: #333333;}
To improve reading comfort, use line-height.
Example:
p {line-height: 1.7;}
Line height is important because tightly packed text feels harder to read. Blog posts, guides, and long pages usually need more comfortable spacing.
Here is a more complete typography example:
body {font-family: "Inter", Arial, sans-serif;font-size: 16px;line-height: 1.7;color: #222222;}
h1, h2, h3 {font-family: Georgia, serif;font-weight: 700;line-height: 1.2;color: #111111;}
This creates a simple and readable typography system. Body text uses a clean sans serif, while headings use a serif for contrast.
You can also style buttons:
.btn {font-family: "Inter", Arial, sans-serif;font-size: 1rem;font-weight: 600;}
The goal is consistency. If every section uses a different font size, colour, and weight, the page becomes hard to scan. Good typography should guide the reader naturally.
Common Mistakes When Changing Font in HTML
The first common mistake is using the old <font> tag. You may still find examples like this:
<font face="Arial" size="4" color="red">Hello</font>
This is outdated and should be avoided. Modern web design uses CSS instead. CSS is cleaner, more flexible, and better for responsive websites.
A second mistake is using too many fonts. Beginners often add several fonts because each one looks interesting. The result is usually messy. Most websites only need one or two font families.
A good setup is:
- One font for body text
- One font for headings
- Optional accent font for special branding elements
A third mistake is forgetting fallback fonts. This is risky:
font-family: "Poppins";
This is better:
font-family: "Poppins", Arial, sans-serif;
If Poppins fails to load, the browser still has a backup.
A fourth mistake is choosing fonts that look attractive but are hard to read. A decorative script may work for a logo, but it is usually poor for long paragraphs. Body text should be clear, readable, and comfortable.
A fifth mistake is loading too many web font weights. For example, loading 100, 200, 300, 400, 500, 600, 700, 800, and 900 for multiple fonts can increase page weight. Choose only the weights you actually use.
A sixth mistake is confusing real CSS fonts with copy-and-paste Unicode text. A CSS font changes how normal text is displayed on a webpage. Unicode styled text uses special characters that look decorative when pasted. They are not the same thing.
For a website, CSS fonts are the proper method. Copy-and-paste styles are better for short decorative text in social profiles, captions, or small creative elements. If you mention those styles, keep them separate from real HTML font styling.
Use this quick checklist before finishing your font CSS:
- Did I use CSS instead of the old
<font>tag? - Did I include fallback fonts?
- Is the body text easy to read?
- Are font sizes comfortable on mobile?
- Did I limit the number of font families?
- Did I load only the font weights I need?
- Does the design still work if the web font fails?
- Is the font licence suitable for my project?
This checklist can prevent most beginner typography problems.
Best Practices for Clean HTML Font Styling
A good font setup should be easy to read, easy to maintain, and flexible across devices. You do not need complicated code to achieve that. You need a clear structure.
Start with a base font on the body. This controls most text on the page.
Example:
body {font-family: "Inter", Arial, sans-serif;font-size: 16px;line-height: 1.6;color: #222;}
Then style headings separately.
Example:
h1, h2, h3 {font-family: "Georgia", serif;line-height: 1.2;}
Next, use classes for special sections rather than repeating inline styles.
Example:
.hero-title {font-size: clamp(2rem, 5vw, 4rem);font-weight: 700;}
The clamp() function is useful for responsive typography because it lets text scale between a minimum and maximum size.
You can also use CSS variables for a more organised system.
Example:
:root {--font-body: "Inter", Arial, sans-serif;--font-heading: Georgia, serif;}
body {font-family: var(--font-body);}
h1, h2, h3 {font-family: var(--font-heading);}
This is helpful for larger websites because changing one variable can update the typography across the whole design.
For WordPress users, the exact method depends on the theme or page builder. You may add CSS through the Customiser, a child theme, a custom CSS plugin, or a block/page builder setting. The same principle still applies: use CSS rules, not outdated HTML tags.
For quick testing, tools like Visual Studio Code, CodePen, and Chrome DevTools are very useful. Visual Studio Code helps you write and organise files. CodePen lets you test HTML and CSS quickly in the browser. Chrome DevTools lets you inspect existing text and see which font rules are active.
The main takeaway is simple: create a small typography system instead of styling each line separately. Use CSS, set a base font, add fallbacks, style headings with intention, and keep readability at the centre.
Conclusion
Now you know how to change font in HTML the right way. The key point is that modern websites use CSS for font styling. HTML gives the page structure, while CSS controls the visual design. Instead of using the old <font> tag, use font-family, font-size, font-weight, font-style, color, and related CSS properties.
For small tests, inline CSS can work. For a single simple page, internal CSS may be enough. For real websites, external CSS is usually the cleanest option. If you want more design control, use Google Fonts or custom web fonts with proper fallbacks.
The best font setup is not always the fanciest. It should be readable, responsive, fast, and easy to maintain. Choose one or two font families, include fallback fonts, avoid unnecessary font weights, and test your text on mobile as well as desktop.
A useful next step is to create a simple HTML page, add a CSS file, and practise changing the font family, size, colour, and heading style until the page feels clear and consistent.
FAQs
Can you change font in HTML without CSS?
Technically, old HTML examples may use the <font> tag, but that method is deprecated and not recommended. The correct modern way is to use CSS. CSS gives you better control over font family, size, colour, weight, spacing, and responsive behaviour.
What CSS property changes the font in HTML?
The main CSS property is font-family. It tells the browser which font to use for an element. A good font-family rule includes fallback fonts, such as font-family: "Poppins", Arial, sans-serif;, so the text still displays properly if the first font fails.
How do I use Google Fonts in HTML?
Choose a font from Google Fonts, copy the provided <link> code into your HTML, then use the font name in CSS with font-family. Always include fallback fonts. For example, use "Poppins", Arial, sans-serif instead of only "Poppins".
How do I change font size in HTML?
Use the CSS font-size property. For example, p { font-size: 18px; } changes paragraph size. You can also use rem, %, or responsive functions like clamp() for more flexible typography across desktop and mobile screens.
Is the HTML font tag still used?
The <font> tag is outdated and should not be used for modern websites. CSS replaced it because CSS is cleaner, more flexible, easier to maintain, and better suited for responsive design. If you find old tutorials using <font>, use CSS instead.
What is the best font for HTML websites?
There is no single best font for every website. Clean fonts such as Arial, Inter, Roboto, Helvetica, Georgia, and system font stacks are common choices. The best font depends on your brand, readability needs, loading speed, and how the design looks on different devices.
