The Three Ways to Set Font in HTML

You change font in HTML using the CSS font-family property, which tells the browser which typeface to display. You can set it three ways: inline (directly on a single tag), internal (in a <style> block at the top of your page), or external (in a separate CSS file). Most websites use external CSS because it keeps your code organized and lets you change fonts across many pages at once.

HTML itself has no font tag anymore — older versions had a <font> tag, but modern browsers ignore it. Everything goes through CSS now. The simplest approach for a beginner is inline CSS, which works when ready and shows you the result right away.

Key Takeaways

  • Use the CSS property font-family followed by a typeface name to change what font displays on your page.
  • Inline CSS (style="font-family: Arial;") works on a single tag and is the fastest way to test a change.
  • Internal CSS in a <style> block at the top of your page applies the same font to all matching tags without repeating code.
  • Always list multiple font names separated by commas, with generic fallbacks like serif or sans-serif at the end, so the browser has a backup if your first choice is not installed.
  • Web-safe fonts like Arial, Georgia, and Times New Roman display on almost all devices; Google Fonts and other services let you use less common typefaces.

Inline CSS: Changing Font on One Tag

The quickest way to change a single element's font is to add a style attribute directly to the tag. Write style="font-family: Arial;" inside the opening tag. Here is a real example:

<p style="font-family: Georgia;">This paragraph displays in Georgia.</p>

The browser reads that attribute and displays the text in Georgia instead of the default font. This method works when ready and requires no setup. The downside is that if you have ten paragraphs and want them all in Georgia, you have to type the style attribute ten times. That is why inline CSS is best for testing or for one-off changes.

Internal CSS: Styling All Tags of One Type

If you want all paragraphs (or all headings, or all links) to use the same font, put a <style> block in the <head> section of your HTML file, before the <body> tag. Inside it, write the tag name, then the font-family property:

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

Now every <p> tag on that page displays in Verdana without you having to add style to each one. You can add more rules in the same <style> block — for example, h1 { font-family: Georgia; } to make all top headings Georgia. This keeps your code cleaner than inline styles and is the standard approach for a single-page site.

External CSS: Controlling Fonts Across Many Pages

When you have a whole website with many pages, put all your CSS rules in a separate file called something like styles.css. In that file, write your font rules exactly as you would in a <style> block. Then, in the <head> of every HTML page, link to it:

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

Now every page that links to styles.css uses the same fonts. If you want to change the font for all paragraphs across your entire site, you change it once in styles.css, and the change appears everywhere. This is how professional websites manage their design.

Font Names and Fallback Fonts

Always list more than one font name, separated by commas, because not every device has every typeface installed. If you write font-family: Georgia; and the user's computer does not have Georgia, the browser falls back to whatever it uses by default — often Times New Roman, which may not be what you want. Instead, write:

font-family: Georgia, "Times New Roman", serif;

The browser tries Georgia first. If that is not available, it tries Times New Roman. If that is not available, it uses whatever serif font the system has. The last item — serif, sans-serif, or monospace — is a generic fallback that every browser understands. Font names with spaces, like "Times New Roman", must be wrapped in quotes.

Web-safe fonts like Arial, Verdana, Georgia, and Courier New are installed on nearly all computers and phones, so they display consistently. If you want a less common typeface, use a service like Google Fonts, which hosts fonts on the internet and lets you load them into your page.

Using Google Fonts for Uncommon Typefaces

Google Fonts is a free library of typefaces you can embed in your website. Visit fonts.google.com, browse typefaces, and click the one you want. Google gives you a link to paste into your <head> section and a CSS rule to use in your stylesheet.

For example, if you choose the font "Roboto", Google provides a line like <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet"> that you paste into your <head>. Then in your CSS, you write font-family: Roboto, sans-serif; just as you would for a web-safe font. The browser downloads Roboto from Google's servers and displays it on the user's screen, even if they do not have it installed locally.

Google Fonts works on all modern browsers and is the standard way to use custom typefaces without paying for a license or hosting the font files yourself.

Common Font Properties Beyond Font-Family

Once you have chosen a font with font-family, you can adjust its appearance with other CSS properties. font-size controls how large the text is — write font-size: 18px; or font-size: 1.2em; (where em is relative to the parent element's size). font-weight makes text bold — use font-weight: bold; or a number like font-weight: 700; (400 is normal, 700 is bold).

font-style: italic; slants the text, and line-height controls the space between lines of text. You can combine all of these in one rule:

p { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; line-height: 1.5; }

This sets paragraphs to Arial, 16 pixels tall, bold, with 1.5 times the normal line spacing. Experiment with these properties to match the look you want.

Frequently Asked Questions

What is the difference between font-family and font?

font-family sets only the typeface. font is a shorthand that sets the typeface, size, weight, and style all at once in one line. For example, font: bold 16px Arial, sans-serif; is the same as writing font-weight: bold; font-size: 16px; font-family: Arial, sans-serif; on separate lines. Both work; shorthand is faster to type.

Why does my font not show up even though I wrote the CSS correctly?

The most common reason is that the font name is misspelled or the browser does not have it installed. Check your spelling against the official font name. If you are using Google Fonts, make sure you pasted the <link> tag into your <head> section before the <style> block. If the font still does not appear, the fallback font will display instead, which is why listing multiple fonts matters.

Can I use any font I want on my website?

You can use web-safe fonts (Arial, Georgia, Verdana) on any site without extra setup. For other fonts, use Google Fonts or another font service that hosts them legally. Do not read a font file from the internet and assume you can use it — many fonts have licenses that restrict commercial use. Google Fonts are all free and legal to use on any website.

Does changing the font affect how search engines see my page?

No. Search engines read the text content, not the visual styling. Whether your text is Arial or Georgia makes no difference to search rankings. The only thing that matters is the actual words on the page.

What happens if I use a font name that does not exist?

The browser skips it and moves to the next font in your list. If all the fonts in your list are unavailable, the browser uses its default font (usually Times New Roman or a system serif). This is why the generic fallback at the end — serif, sans-serif, or monospace — is important. It ensures something readable always displays.