How to Change Font in HTML (Family, Size, Color & Google Fonts)

by
Home/Learn/How to change the font

How to Change the Font in HTML

To change the font in HTML, use CSS, not HTML tags: body { font-family: Arial, sans-serif; } changes the font for the whole page. font-size, font-weight and color set the size, boldness and color. For fonts your visitors may not have, link one from Google Fonts or load your own file with @font-face.

Last updated: October 4, 2026

Quick answer

body { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 18px; color: #1e293b; } h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }

Step 1: Change the font family

The font-family property chooses the typeface. You almost never list just one font: you write a font stack, a list of fonts in order of preference. The browser uses the first one installed on the visitor’s device and falls back to the next.

  1. Pick the element to style: body for the whole page, or a heading, class or paragraph for just part of it.
  2. List your fonts, separated by commas. Put names with spaces in quotes: "Times New Roman".
  3. End with a generic family: sans-serif, serif, monospace, cursive or system-ui. It’s the last-resort fallback that always exists.

Try swapping the stacks in the example, or set body to monospace.

index.html
Preview
Open in Full Editor →

Fonts that are safe to rely on without loading anything include Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman and Courier New, plus system-ui, which uses the device’s own font (San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android).

Step 2: Change the size, weight, style and color

  • font-size: how big the text is. px is a fixed size; rem is relative to the browser’s base size (usually 16px), so 1.25rem = 20px and it grows when a visitor increases their browser’s text size. Use rem for accessible sizing.
  • font-weight: how bold. 400 is normal, 700 is bold; fonts may offer weights from 100 (thin) to 900 (black).
  • font-style: italic: slanted text.
  • color: the text color, as a name (navy), hex (#1e293b) or rgb().
  • line-height: the space between lines. Around 1.5 to 1.7 makes paragraphs much easier to read.
  • letter-spacing and text-transform: uppercase: handy for small labels and buttons.
index.html
Preview
Open in Full Editor →

Step 3: Use a Google Font

To use a font your visitors don’t have installed, load it from a font service. Google Fonts is free and the most common:

  1. Go to fonts.google.com, open a font (for example Poppins) and choose the weights you need. Fewer weights = faster page.
  2. Click Get font → Get embed code and copy the <link> tags.
  3. Paste them into your page’s <head>, before your own stylesheet.
  4. Use the font in CSS by name, with a fallback stack: font-family: "Poppins", Arial, sans-serif;.
index.html
Preview
Open in Full Editor →

display=swap at the end of the address tells the browser to show the text in a fallback font straight away and swap to the web font once it arrives, instead of showing invisible text while it loads.

Step 4: Load your own font file with @font-face

If you have a font file (for example a brand font, or a Google Font you’ve downloaded to avoid loading from Google), host it yourself and declare it with @font-face. Use the WOFF2 format: it’s the smallest and every current browser supports it.

@font-face { font-family: "MyBrand"; src: url("fonts/mybrand-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "MyBrand"; src: url("fonts/mybrand-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } body { font-family: "MyBrand", Arial, sans-serif; }

Declare one @font-face block per file, all with the same font-family name but different font-weight (or font-style) values. The browser then picks the right file automatically when you use font-weight: 700. Make sure the font’s license allows use on websites.

Why not the <font> tag?

Old tutorials show <font face="Arial" size="4" color="red">. The <font> tag was removed from HTML years ago: browsers still display it for old pages, but it mixes design into the content, has to be repeated around every piece of text, and can’t do sizes in rem, weights or web fonts. Use CSS, where one rule can restyle a whole site.

Similarly, <b> and <i> are for meaning, not just looks: use <strong> for important text and <em> for emphasis, and font-weight / font-style in CSS when you only want the visual effect.

Tips for readable text

Choosing a font is only half of it; how you set it matters just as much. Keep body text at 16px (1rem) or larger, with a line-height around 1.5–1.7. Limit line length to about 60–80 characters with max-width: 65ch on paragraphs, because very long lines are tiring to read. Make sure the text color has strong contrast with the background: dark grey on white or light grey on a dark background, never mid-grey on grey. And use one family for body text and at most one more for headings; mixing many fonts looks messy.

Generic font families

Generic familyLooks likeTypical use
sans-serifArial, Helvetica: no strokes at the letter endsBody text and interfaces on screens
serifTimes, Georgia: small strokes at the letter endsLong reading, editorial, elegant headings
monospaceCourier: every letter the same widthCode, tables of figures
system-uiThe device’s own interface fontApps and fast-loading sites
cursive / fantasyHandwriting / decorative; varies a lot by deviceRarely; choose a specific web font instead

Common font mistakes

  • No fallback. font-family: Poppins; alone falls back to the browser default (often Times) if the font fails. Always end with a generic family.
  • Missing quotes around names with spaces. Write "Open Sans", not Open Sans.
  • Using a weight you didn’t load. If you only load Poppins 400, font-weight: 700 makes the browser fake a bold version, which looks smudgy. Load the weights you use.
  • Too many fonts and weights. Each one is a download. Two families and three or four weights is plenty.
  • Text that’s too small. Body text below 16px is hard to read on phones.
  • A typo in the font name. The name in CSS must match the one from Google Fonts or your @font-face exactly.
<style> <link> <p> <h1>–<h6> <strong> & <em>

Frequently asked questions

How do I change the font in HTML?
Use the CSS font-family property, for example body { font-family: Arial, sans-serif; } in a <style> tag or stylesheet. The <font> tag is obsolete and should not be used.
How do I change the font size in HTML?
Use the CSS font-size property, for example p { font-size: 1.125rem; }. rem units scale with the visitor's browser text size, which is better for accessibility than fixed px sizes.
How do I add a Google Font to my website?
Choose a font on fonts.google.com, copy the <link> embed code into your page's <head>, then use the font name in CSS with fallbacks, such as font-family: "Poppins", Arial, sans-serif;.
Why is my font not changing?
Check that the font name is spelled exactly right and quoted if it has spaces, that the font is actually loaded (for web fonts, the <link> or @font-face is correct), and that a more specific CSS rule isn't overriding yours.
What is a font stack?
A comma-separated list of fonts in font-family. The browser uses the first one available on the device and falls back to the next, ending with a generic family like sans-serif that always exists.
How do I make text bold or italic with CSS?
Use font-weight: 700 (or bold) for bold and font-style: italic for italics. For text that is genuinely important or emphasized, use the <strong> and <em> elements, which also carry meaning for screen readers.