The fastest way to change font in HTML

You change font in HTML using the style attribute on any tag, or by writing CSS rules in a <style> block at the top of your page. The style attribute is quickest for one or two words; CSS is cleaner when you want the same font across many elements.

The most direct method is to add style="font-family: Arial" to any tag. For example, <p style="font-family: Georgia">This text is Georgia</p> makes that paragraph Georgia font. You can also add font-size: 18px or color: blue in the same style attribute, separated by semicolons.

If you want the same font across your whole page, write a <style> block inside the <head> section before your content starts. This method is faster than adding style to every single tag.

Key Takeaways

  • The style attribute works on any HTML tag and changes font for just that element: <p style="font-family: Arial">.
  • A <style> block in the head section lets you set one font rule that applies to all matching tags on the page.
  • Web-safe fonts like Arial, Georgia, Times New Roman, and Verdana display the same way on almost all devices and browsers.
  • Google Fonts is a free library of hundreds of fonts you can import and use in your HTML without installing anything.
  • Font size uses pixels (px), ems (em), or percentages (%), and color uses color names, hex codes, or RGB values.

Using the style attribute for single elements

The style attribute is the quickest way to change one word, one sentence, or one paragraph. You write it directly inside the opening tag of any HTML element. The syntax is always style="property: value", with a colon between the property name and the value, and a semicolon at the end if you add more properties.

For a heading, you would write <h1 style="font-family: Courier New">My Title</h1>. For a link, <a href="page.html" style="font-family: Trebuchet MS">Click here</a>. The font changes only for that one element. Everything else on the page stays the same.

You can combine multiple style properties in one attribute by separating them with semicolons: <p style="font-family: Arial; font-size: 16px; color: darkblue">. This changes the font to Arial, the size to 16 pixels, and the color to dark blue all at once.

Writing CSS rules in a style block

A <style> block sits inside the <head> section of your HTML page, before the <body> starts. Inside it, you write rules that explore to all matching tags. This is cleaner than adding style to every single element when you want consistent formatting across the page.

The basic structure is selector { property: value; }. To make all paragraphs Georgia font, write:

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

Now every <p> tag on the page uses Georgia automatically. You can also target specific elements by class or ID. If you add class="highlight" to certain paragraphs, you can style only those with .highlight { font-family: Arial; }. The period tells the browser you are targeting a class name.

Web-safe fonts that work everywhere

Web-safe fonts are fonts that come installed on almost all computers and phones, so they display the same way whether someone uses Windows, Mac, or Linux. The most common ones are Arial, Verdana, Georgia, Times New Roman, Courier New, and Trebuchet MS. If you use one of these, your page looks the same to nearly everyone who visits.

If you specify a font that is not installed on someone's device, the browser falls back to a default font, usually Times New Roman. To prevent this, you can list multiple fonts in order of preference: font-family: Georgia, "Times New Roman", serif. The browser tries Georgia first, then Times New Roman if Georgia is not available, then any serif font if neither is found.

The last option in the list should always be a generic family: serif (fonts with small lines at the ends of letters), sans-serif (fonts without those lines), or monospace (fonts where every letter takes up the same width). This ensures the text displays in something readable even if none of your preferred fonts are available.

Using Google Fonts for more choices

Google Fonts is a free library of hundreds of fonts you can use on your website without installing anything on your computer. You link to Google Fonts in your HTML, and the font downloads when someone visits your page. This lets you use fonts like Roboto, Open Sans, Lato, and Playfair Display instead of being limited to web-safe fonts.

To use a Google Font, first go to fonts.google.com, search for the font you want, and click the plus icon next to it. A panel appears on the right side showing you the import code. Copy the <link> tag and paste it into the <head> section of your HTML, above your <style> block.

Then in your CSS, use the font name exactly as Google shows it: font-family: "Roboto", sans-serif. If the font name has spaces, put it in quotes. The sans-serif at the end is still a good idea as a fallback. Google Fonts works on all modern browsers and phones.

Controlling font size and other properties

Font size is set with the font-size property. The most common unit is px (pixels): font-size: 18px makes text 18 pixels tall. You can also use em, which is relative to the parent element's size, or percentages. A size of 1.5em means 1.5 times the parent size; 120% means 120 percent of the parent size.

Other useful font properties include font-weight (how bold the text is), font-style (italic or normal), and color (the text color). Font weight uses numbers like 400 for normal and 700 for bold, or the words normal and bold. Font style uses italic or normal. Color can be a color name like blue, a hex code like #0066cc, or an RGB value like rgb(0, 102, 204).

A complete example: <p style="font-family: Arial; font-size: 16px; font-weight: bold; color: darkgreen"> creates a dark green, bold, 16-pixel Arial paragraph. You can combine as many properties as you need, always separating them with semicolons.

Common mistakes and how to fix them

The most common mistake is forgetting the colon between the property and value, or forgetting the semicolon between multiple properties. font-family Arial does not work; it must be font-family: Arial. Similarly, font-family: Arial font-size: 16px does not work; it must be font-family: Arial; font-size: 16px.

Another mistake is using a font name that does not exist or is misspelled. If you write font-family: Ariel instead of Arial, the browser will not find it and will use the fallback font instead. Always check the spelling, and remember that font names are case-sensitive in some contexts.

If you use a Google Font and it does not appear, check that the <link> tag is in your <head> section and that the font name in your CSS matches exactly what Google shows. If the font name has spaces, it must be in quotes: "Open Sans", not Open Sans.

Frequently Asked Questions

Can I change the font of just one word in a paragraph?

Yes. Wrap that word in a <span> tag and add style to it: <p>This is <span style="font-family: Georgia">one word</span> in Georgia.</p> The span tag does not create a line break; it just marks that portion of text so you can style it separately.

What is the difference between font-family and font?

The font-family property sets only the typeface. The font property is a shorthand that can set the typeface, size, weight, and style all at once, but it is less common and more confusing. Stick with font-family for the typeface and separate properties for size and weight.

Do I need to install fonts on my computer for them to show up on my website?

No. Web-safe fonts and Google Fonts read automatically when someone visits your page. You do not need to install anything. The only time you need to install a font is if you want to use it in a design program like Photoshop or Word on your own computer.

Why does my font look different on my phone than on my computer?

Different devices render fonts slightly differently, and some fonts are not installed on all phones. Use web-safe fonts or Google Fonts to keep the look consistent. Also check that your font size is readable on small screens; 16 pixels is usually the minimum for body text on phones.

Can I use a custom font file that I created myself?

Yes, using @font-face in CSS. You upload the font file to your website and tell CSS where to find it. This is more advanced and requires the font to be in a web-compatible format like .woff or .woff2. For most projects, Google Fonts is simpler and faster.