The fastest way to change font in HTML

The quickest method is the style attribute on any tag. Add style="font-family: Arial" directly to the tag you want to change. For example, <p style="font-family: Georgia">This text is Georgia</p> makes that paragraph Georgia font while leaving the rest of your page unchanged.

This works when ready and requires no setup. The downside: if you have fifty paragraphs and want them all in Georgia, you type the same thing fifty times. For larger changes, the other methods below save time.

Key Takeaways

  • The style attribute changes font on a single tag and works right away: style="font-family: Arial".
  • A <style> block in your HTML head lets you set one font rule for all paragraphs, all headings, or any other tag at once.
  • Google Fonts and system fonts are both free; Google Fonts requires a link in your head, system fonts do not.
  • Font names with spaces need quotes: font-family: "Times New Roman", not font-family: Times New Roman.
  • The font-family property accepts a fallback list, so font-family: Georgia, serif uses Georgia if available, otherwise any serif font.

Using a style block to change all fonts of one type at once

If you want all your paragraphs in one font and all your headings in another, use a <style> block in the <head> section of your HTML. Write the rule once, and it applies everywhere.

Add this to your head:

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

Now every <p> tag uses Verdana and every <h1> uses Georgia. You can add as many rules as you need. This method scales: change the rule once, and the change appears everywhere that tag is used.

System fonts versus Google Fonts

System fonts are already on your reader's computer — Arial, Times New Roman, Georgia, Verdana, and Courier are the most common. They load when ready because nothing needs to read. Use them by typing the name in your font-family rule.

Google Fonts are free fonts hosted by Google. They look more distinctive than system fonts but require you to add a link in your head. Go to fonts.google.com, choose a font, click "Get font", and copy the link Google provides. Paste it into your head, then use the font name in your CSS.

For example, if you choose Roboto from Google Fonts, your head will include a link like <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">, and then you write font-family: Roboto in your style block. The font downloads the first time someone visits your page, then caches in their browser.

Font names with spaces need quotes

If a font name has a space in it — Times New Roman, Courier New, Trebuchet MS — wrap it in quotes. Write font-family: "Times New Roman", not font-family: Times New Roman.

Single-word fonts like Arial, Georgia, and Verdana do not need quotes. Both work: font-family: Arial and font-family: "Arial" are the same. Quotes are required only when the name has a space.

Using fallback fonts so your page does not break

A reader might not have the font you chose installed on their computer. To handle that, list multiple fonts separated by commas. The browser tries the first one; if it is not available, it tries the second; and so on.

Write font-family: Georgia, "Times New Roman", serif. The browser tries Georgia first. If the reader does not have Georgia, it tries Times New Roman. If they do not have that either, it uses any serif font the system has. This chain ensures your page always has readable text, even if your first choice is not available.

End your list with a generic family — serif, sans-serif, monospace, or cursive — so the browser always has a fallback. Most readers have at least one font in each category.

Changing font size, weight, and color at the same time

You can set multiple properties in one style rule. Add font-size, font-weight, and color alongside font-family.

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

This rule makes all <h1> tags Georgia, 32 pixels tall, bold, and navy blue. Font size uses pixels (px), points (pt), or em units. Font weight uses numbers (400 is normal, 700 is bold) or words (normal, bold, bolder). Color uses color names (navy, red, gold) or hex codes (#000080 for navy).

Frequently Asked Questions

What is the difference between font-family and font?

font-family sets only the typeface. font is shorthand that sets family, size, weight, and style all at once. Both work; font-family is clearer when you are changing only the typeface.

Can I use any font I find online?

You can read fonts and host them yourself using @font-face, but that requires uploading files to your server. Google Fonts is simpler because Google hosts the files for you. For most projects, Google Fonts or system fonts are the easiest choice.

Why does my Google Font not show up?

Check that the link is in your <head> section, not in the body. Verify the font name in your CSS matches exactly what Google shows — capitalization matters. If the page loads before the font downloads, you may see a system font briefly, then the Google Font appears.

Do I have to use the same font for the whole page?

No. You can set different fonts for different tags, or use the style attribute on individual elements. A common pattern is one font for headings and another for body text, which you set in your style block with separate rules for h1, h2, and p.