The fastest way to change font in HTML
You change font in HTML by adding a style attribute to the tag that holds your text. The simplest method is to write style="font-family: Arial" directly into the opening tag. For example: <p style="font-family: Georgia">This text is Georgia.</p> will display that paragraph in Georgia font instead of your browser's default.
If you want to change the font for your entire page at once, put a <style> block in the <head> section of your HTML document. Inside it, write body { font-family: Verdana; } and every paragraph, heading, and list on that page will use Verdana unless you override it elsewhere. This saves you from typing the same style into dozens of tags.
The third option is to link to an external CSS file, which is what professional websites do. You write your font rules once in a separate file, then link to it from every page that needs those fonts. This keeps your HTML clean and makes changes faster when you have many pages.
Key Takeaways
- Use style="font-family: FontName" inside any HTML tag to change the font of just that element.
- Put a <style> block in your document's <head> to change fonts for the whole page or specific tag types.
- Web-safe fonts like Arial, Georgia, Times New Roman, and Verdana work on almost all devices without extra setup.
- Google Fonts and Adobe Fonts let you use thousands of custom fonts by adding one line to your HTML and one line to your CSS.
Using the style attribute on individual tags
The style attribute method works on any HTML tag that contains text. You add style="font-family: FontName" to the opening tag, and only that element changes. For a heading: <h1 style="font-family: Courier New">My Title</h1>. For a link: <a href="page.html" style="font-family: Comic Sans MS">Click here</a>.
This method is useful when you want one or two elements to stand out, but it gets tedious if you need the same font on ten different tags. You end up typing the same style over and over. That is when a <style> block becomes faster.
Adding a style block to change fonts across your page
A <style> block sits inside the <head> section of your HTML document, above the <body>. Inside it, you write rules that explore to entire tag types or to tags you mark with a class name. For example:
<head> <style> body { font-family: Georgia; } h1 { font-family: Arial; } p { font-family: Verdana; } </style> </head>
Now every paragraph on your page uses Verdana, every <h1> heading uses Arial, and everything else inherits Georgia from the body rule. You can also target specific elements by giving them a class attribute. Write <p class="highlight">Important text</p> in your HTML, then add .highlight { font-family: Impact; } to your style block. Only paragraphs with class="highlight" will change.
Web-safe fonts that work everywhere
Web-safe fonts are fonts installed on almost every computer and phone, so they display the same way for everyone. The most common are Arial, Georgia, Times New Roman, Verdana, Courier New, and Trebuchet MS. When you type font-family: Arial, your browser looks for Arial on the user's device and displays it if it finds it.
If the font is not installed, the browser falls back to the next font in your list. You can write font-family: Georgia, "Times New Roman", serif to say: use Georgia if available, then Times New Roman, then any serif font the browser has. The word serif at the end is a generic fallback that tells the browser to pick any serif font rather than use its default.
The five generic fallbacks are serif, sans-serif, monospace, cursive, and fantasy. Always include one at the end of your font list so your page does not break if none of your chosen fonts are available.
Using Google Fonts for custom typefaces
Google Fonts is a free library of thousands of fonts you can use on your website without installing anything on your computer. To use one, go to fonts.google.com, search for a font you like, and click the plus button to add it to your collection. Then click the "Use" button and Google gives you two lines of code to copy.
The first line is a <link> tag that goes in your <head> section. It looks like <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">. The second line is the CSS rule you add to your style block: font-family: 'Roboto', sans-serif;. Once both are in place, your page loads that font from Google's servers and displays it to every visitor, regardless of what fonts they have installed.
Google Fonts works because it sends the actual font file to the user's browser when they visit your page. This takes a fraction of a second and does not require the user to have the font on their device. You can add multiple Google Fonts to one page by adding more fonts to your collection and including all of them in the link tag.
Linking to an external CSS file
When you have many pages or many font rules, storing all your styles in a separate CSS file keeps your HTML cleaner and makes updates faster. Create a new file called styles.css and write all your font rules inside it:
body { font-family: Georgia; } h1 { font-family: Arial; } p { font-family: Verdana; }
Then in the <head> of your HTML document, add a single line: <link rel="stylesheet" href="styles.css">. The browser reads that file and applies all the rules to your page. If you have ten pages and you want to change all the headings from Arial to Courier New, you edit styles.css once and all ten pages update automatically.
The href path depends on where your CSS file is located. If styles.css is in the same folder as your HTML file, use href="styles.css". If it is in a subfolder called css, use href="css/styles.css". If it is in a parent folder, use href="../styles.css".
Combining font-family with size and weight
You can change the font and its size in the same style rule. Add font-size: 18px or font-size: 1.5em to make text larger or smaller. You can also add font-weight: bold to make it heavier or font-weight: 300 to make it lighter. For example:
<p style="font-family: Georgia; font-size: 20px; font-weight: bold;">Bold Georgia text, 20 pixels.</p>
In a style block, you would write the same rules separated by semicolons:
p { font-family: Georgia; font-size: 16px; font-weight: normal; }
Pixels (px) are fixed sizes that look the same on every screen. Ems (em) are relative sizes based on the parent element's font size, which makes them useful for responsive design. Most beginners start with pixels and switch to ems once they understand how they work.
Frequently Asked Questions
What happens if I type a font name that does not exist?
The browser skips it and moves to the next font in your list. If you write font-family: MadeUpFont, Arial, sans-serif and MadeUpFont is not installed, the browser uses Arial. If Arial is also missing, it uses whatever sans-serif font it has. Always end your font list with a generic fallback like serif or sans-serif so something displays.
Can I use fonts from my computer on my website?
Yes, but only if you host the font file on your web server and use the @font-face rule in your CSS. This is more complex than using Google Fonts and requires you to have the legal right to distribute the font. Google Fonts is simpler and free, so most beginners use that instead.
Do I need to use quotes around font names?
Only if the font name has spaces. Write font-family: Georgia without quotes, but font-family: "Times New Roman" with quotes because the name has spaces. Single or double quotes both work.
How do I change the font color at the same time?
Add color: red or color: #FF0000 to your style rule. For example: style="font-family: Arial; color: blue;" changes both the font and its color. Color names like red, blue, and green work, or you can use hex codes like #FF0000 for more precise control.
What is the difference between font-family and font?
The font property is a shorthand that lets you set font-family, font-size, and font-weight all at once. Writing font: bold 18px Georgia is the same as writing font-weight: bold; font-size: 18px; font-family: Georgia. The shorthand is faster to type but less readable for beginners.