The Three Ways to Set Font in HTML

You change font in HTML by using the style attribute, a style tag, or an external CSS file. The style attribute is fastest for one element. A style tag works when you want to format multiple elements in the same page. An external CSS file is the standard approach for a whole website because you can reuse the same rules across many pages.

HTML itself does not change fonts — it only marks up text as a heading, paragraph, or list. The actual font appearance comes from CSS, which is a separate language that lives alongside HTML. Every modern browser understands CSS, so any method you choose will work in all of them.

The font you choose must either be installed on the reader's computer or loaded from the internet. System fonts like Arial, Times New Roman, and Georgia are safe because almost every computer has them. If you want a less common font, you load it from Google Fonts or another font service, which adds a line to your HTML.

Key Takeaways

  • The style attribute changes font for a single element: <p style="font-family: Arial;">Text here</p>
  • A style tag in the head section changes font for all matching elements on one page: p { font-family: Arial; }
  • An external CSS file changes font across your entire website and is the method professional sites use.
  • System fonts like Arial and Georgia work everywhere; uncommon fonts must be loaded from Google Fonts or a similar service.
  • Font size, weight, and color are set with separate CSS properties: font-size, font-weight, and color.

Using the Style Attribute for a Single Element

The style attribute is the quickest way to change one piece of text. You add it directly to the HTML tag and write the CSS rule inside quotes. For a paragraph in Arial font, write: <p style="font--family: Arial;">Your text here</p>

You can combine multiple properties in one style attribute by separating them with semicolons. To make a paragraph Arial, size 18, and blue, write: <p style="font-family: Arial; font-size: 18px; color: blue;">Your text here</p>

The style attribute works on any HTML tag — paragraphs, headings, list items, links, and more. It is useful for quick changes or one-off formatting, but if you need the same font on many elements, a style tag or external file saves you from repeating the same code over and over.

Using a Style Tag to Format Multiple Elements

A style tag goes in the head section of your HTML page, above the body. Inside it, you write rules that explore to all matching elements on that page. To make every paragraph Arial, write this in the head:

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

Now every <p> tag on the page uses Arial without you having to add a style attribute to each one. You can add more rules below the first one. To make headings a different font and paragraphs a third font, write:

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

A style tag applies only to the page it is on. If you have ten pages and want them all to use the same fonts, you would need to copy the style tag into each page. That is where an external CSS file becomes useful.

Using an External CSS File for Your Whole Website

An external CSS file is a separate document that holds all your font rules and other styling. You create a new file, name it something like styles.css, and write your rules in it. Then you link to it from every HTML page using a single line in the head:

<link rel="stylesheet" href="styles.css">

Inside styles.css, you write the same rules you would put in a style tag, but without the <style> tags themselves:

h1 { font-family: Georgia; } p { font-family: Arial; } a { font-family: Verdana; }

Now every page that links to styles.css uses these fonts automatically. If you later decide to change all your paragraphs from Arial to Helvetica, you change it once in the CSS file and every page updates when ready. This is why professional websites use external CSS files — they avoid repeating code and make updates much faster.

Loading Fonts from Google Fonts

System fonts are reliable, but if you want a font that is not installed on most computers, you load it from Google Fonts, which is free and works in all browsers. First, go to fonts.google.com, search for a font you like, and click it. You will see a button that says "Get font" or a plus icon — click it to select the font.

Google Fonts gives you a link to copy. It looks like this: <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> Paste this line into the head section of your HTML page, above any other style tags or CSS links.

Once the link is in place, you use the font name in your CSS rules exactly as you would a system font. If you selected Roboto, write: p { font-family: Roboto; } The browser downloads the font from Google and displays it on the page. If the read fails for any reason, you can add a fallback font after the main one: p { font-family: Roboto, Arial; } This tells the browser to use Roboto if it can, and Arial if it cannot.

Changing Font Size, Weight, and Color

Font family is only one property. You often want to change the size and weight at the same time. Font size uses font-size and accepts measurements like pixels (px), points (pt), or relative sizes like em. For a 16-pixel paragraph, write: p { font-size: 16px; }

Font weight controls how bold the text is. Values range from 100 (very thin) to 900 (very heavy), but the most common are 400 (normal), 700 (bold), and 300 (light). Write: p { font-weight: 700; } to make paragraphs bold, or h1 { font-weight: 300; } to make headings lighter.

Color is set with the color property and accepts color names, hex codes, or RGB values. color: blue; works, as does color: #0000FF; or color: rgb(0, 0, 255); They all produce the same blue. A complete rule combining all three might look like: p { font-family: Arial; font-size: 14px; font-weight: 400; color: #333333; }

Common Font Choices and When to Use Them

Arial and Helvetica are clean, modern sans-serif fonts that work well for body text and headings on websites. Times New Roman and Georgia are serif fonts with small lines at the ends of letters — they feel more formal and are often used in documents rather than websites. Verdana is another sans-serif that is very readable on screens.

For a professional website, pairing a sans-serif for body text with a serif or different sans-serif for headings often looks good. For example, use Arial for paragraphs and Georgia for headings. If you use Google Fonts, popular choices include Roboto (clean and modern), Open Sans (friendly and readable), and Playfair Display (elegant for headings).

Avoid using more than two or three different fonts on one page — too many fonts make a page look cluttered and unprofessional. Stick to one font for all body text and one for headings, or use one font throughout and vary the size and weight instead.

Frequently Asked Questions

What is the difference between font-family and font?

font-family sets only the typeface name. The font property is a shorthand that lets you set family, size, weight, and style all in one line: p { font: bold 16px Arial; } Both work; font-family is clearer when you are only changing the typeface.

Can I use any font I find online?

You can use fonts from services like Google Fonts, Adobe Fonts, or Font Awesome without worrying about licensing. If you read a font file from elsewhere, check its license first — some are free for personal use but not commercial use. Never link directly to a font file hosted on someone else's server without permission.

Why does my font look different on someone else's computer?

If you use a system font like Arial and the reader's computer does not have it installed, their browser picks a different font automatically. This is rare with common fonts like Arial, but it happens. To may provide the same look everywhere, load the font from Google Fonts or another service instead of relying on system fonts.

How do I make text italic or underlined?

Use font-style: italic; for italics and text-decoration: underline; for underlines. You can combine them with font-family and other properties: p { font-family: Arial; font-style: italic; } Avoid underlining body text on websites because readers expect underlines to mean links.

What happens if I list multiple fonts in font-family?

The browser tries the first font, and if it is not available, it tries the second, then the third. This is called a font stack. Write: p { font-family: Roboto, Arial, sans-serif; } The browser will use Roboto if it has it, Arial if not, and any sans-serif font if neither is available. Always end with a generic family like sans-serif or serif as a final fallback.