How to Change Font in HTML

When customizing the look of your website, you can’t forget about typography — how you arrange and style text on the page. Depending on your branding, you’ll want to change the typeface, size, and color of your font to match.

For example, if you favor a dark gray over black in your color scheme, you’ll want to change the default font color of your text. If you’re in media, you may opt for a sans serif font, which is considered the easiest typography to read. But if you’re in the creative field, you may opt for a more decorative typeface. These are just a few reasons you might want to style the font on your website.

In this post, we’ll show you how to change your fonts in HTML to help your copy stand out, delight readers, and drive conversions.

How to Change Font in HTML

Let's look at how you can change the font on your site with just a bit of code. We'll cover:

• how to change font type in HTML
• how to change font size in HTML

• how to change font size within the same paragraph

• how to change font color in HTML
• how to change font in a div in HTML

Let's get started.

Though this approach only requires you to add code to your HTML file, it actually uses the style language CSS. More specifically, this technique is called inline CSS. Inline CSS means your HTML and CSS will be placed together in the body section of your HTML document.

Let’s look at a basic example: using inline CSS to change the font type of a paragraph. I’ll add the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will remain as Times New Roman, the default font type in most browsers.

See the Pen How to Change Font Type in HTML [Inline CSS] by HubSpot (@hubspot) on CodePen.

While inline CSS works fine for changing a single element on the page, we recommend other styles of CSS, namely external CSS, over inline CSS.

External CSS is placed in a CSS file, separated from the HTML. For most developers, this is considered the correct way to change the font face in HTML because you don’t need to copy and paste the same style rules into each tag. Instead, just target all of one type of element with a CSS selector.

Learn More: The Beginner's Guide to HTML & CSS

Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.

For example, let’s say I want to change the font of every paragraph element to Arial. I could use the CSS selector “p” to target all paragraphs:

See the Pen How to Change Font Type in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen.

You can use external CSS with plain CSS code, or paired with a framework like Bootstrap CSS.

Now that we understand how to change font type, let’s turn our attention to font size.

Continuing with our example above, let’s change the font size of a paragraph to 26 pixels with CSS. Same as above, I’ll start by adding the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will keep their default sizes.

See the Pen How to Change Font Size in HTML [Inline CSS] by HubSpot (@hubspot) on CodePen.

Now let’s say I want to change the font of every paragraph element to 26px. I can use a CSS selector to target all paragraphs:

See the Pen How to Change Font Size in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen.

Change Font Size Within the Same Paragraph

Another advantage of CSS is that it provides you with more granular control over your code, so you can do things like apply different font sizes to text inside the same paragraph.

If I want to keep the paragraph at its default font size, I can just wrap the text that I wanted to change the size of in <span> tags. Then, I’ll add a style attribute with the font-size property set to the value I want.

See the Pen How to Change Font Size Within the Same Paragraph [Inline CSS] by HubSpot (@hubspot) on CodePen.

To achieve this effect with external CSS, I'll still wrap the text that I want to change the size of in <span> tags. But, I'll add an ID attribute to the span element. Using an ID selector, I set the span element to a different size.

See the Pen ow to Change Font Size Within the Same Paragraph [Internal CSS] by HubSpot (@hubspot) on CodePen.

For a more in-depth look at the properties and values you can use to change the size of your text, read How to Change Font Size in CSS.

Let’s now change the font color of a paragraph to Lorax orange (hex color code #FF7A59) with CSS. Same as above, I’m going to start by adding the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will remain the default color (black).

See the Pen How to Change Font Color in HTML [Inline CSS] by HubSpot (@hubspot) on CodePen.

Now let’s say I want to change the color of every paragraph element to maroon. I could use a CSS selector to target all paragraphs with external CSS:

See the Pen How to Change Font Color in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen.

To learn how to change the background color of your text, read How to Change Text and Background Color in CSS.

How to Change Font in a Div in HTML

A div in HTML is simply a generic element that can divide your web page into sections so you can target them with unique CSS properties. Changing the font in a div is no different than changing the font in a paragraph or span element.

If you'd like to change the font type, size, and color of text on a page, you can wrap it in div tags and use a CSS selector to style that element.

See the Pen How to Change Font in a Div in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen.

HTML Font Tag

Developers used to be able to use a tag called <font> to change the style of text in HTML. If you wanted to change your font to Arial, you would have written the following line of HTML:

 

<font face="Arial">Your text here.</font>

However, the font tag was deprecated in 1998, having been replaced by CSS. CSS formatting is a more lightweight and flexible alternative to the HTML font tag.

The Best Way to Change Font in HTML & CSS

With some basic web design knowledge, you can change the type, size, and color of your font. This can enable you to customize every detail on your site and make your content more readable.

Editor's Note: This post was originally published in July 2020 and has been updated for comprehensiveness.