To completely customize the look of your website, you can’t forget about font. Depending on your design, business niche, and audience, you may want to change the typeface, size, or color of your font.

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

You used to be able to simply use the font tag to change the style of text. So say you wanted to change your font to Arial, size 18px, and a nice maroon color. You would have written the following line of HTML:

<font face="Arial" size="18px" color="#800000">Your text here.</font>

However, this font tag was deprecated in HTML4 back in 1998. It has been replaced by a much more effective way to change the appearance of text: namely, CSS. CSS text formatting is a more lightweight and flexible alternative to the HTML font tag — and it’s not difficult to learn.

Free Intro Guide to HTML & CSS [Download Now]

Below we’re going to use inline CSS, which means your HTML and CSS will be placed together in the body section of your HTML doc. So, technically, you’ll be changing font “in HTML.”

However, please note that other styles of CSS are recommended over inline CSS. That’s why we’ll also rewrite these examples using CSS that can be placed in the head section of the HTML doc or an external stylesheet. Let’s get started.

Let’s rewrite the example above using the obsolete font tag and change the font type of a paragraph to Arial with CSS. It’s important to note that I’m using the W3Schools Tryit Editor, which uses Times New Roman as its default typeface. I’m going to 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.

Here’s the HTML with inline CSS:

 

 

   <h2>How to Change Font Type in HTML</h2>

<p style="font-family: Arial">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.

</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default typeface is Times New Roman. That means changing the typeface of a paragraph will require me to use a style attribute that contains the CSS font-family property set to "Arial." The other elements on the page are not targeted by inline CSS and therefore remain Times New Roman.

</p>

Here’s the result:

Using inline CSS, the font type of the first paragraph is changed to Arial

Image Source

Now let’s say I want to change the font of every paragraph element to Arial. Then I could use a CSS selector to target all paragraphs and place it inside the head section of the page.

Here’s the CSS:

 

 

   p {

 font-family: Arial;

 }

 

Here’s the HTML:

 

 

   <h2>How to Change Font Type in HTML</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.

</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default typeface is Times New Roman. That means changing the typeface of all paragraphs on the page will require me to use a CSS type selector and set the CSS font-family property  to "Arial." The headings  on the page will remain Times New Roman.

</p>

Here’s the result:

Using internal CSS, the font type of all paragraphs are changed to Arial

Image Source

Now that we understand how to change font type using inline and internal CSS, let’s turn our attention to font size.

To continue to rewrite the first example using the obsolete font tag, let’s change the font size of a paragraph to 18px with CSS. For this example, I’m still going to use the W3Schools Tryit Editor, but I’m going to load Bootstrap CSS on the page. That means, in addition to the default font type being Arial, the default font size of paragraphs will be 14px, heading 2s will be 30px, and heading 3s will be 24px.

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 their default sizes.

Here’s the HTML with inline CSS:

 

 

   <h2>How to Change Font Size in HTML</h2>

<p style="font-size: 18px">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.

</p>

<h3>The Explanation</h3>

<p>I’m using the W3Schools Tryit Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 14px, H2s are 30px, and H3s are 24px. The default typeface is also Arial. That means changing the size of the first paragraph will require me to use a style attribute that contains the CSS font-size property set to "18px." The other elements on the page are not targeted by inline CSS and therefore remain their default sizes.

</p>

 

Here’s the result:

Using inline CSS, the font size of the paragraph is changed to 18px

Image Source

Now let’s say I want to change the font of every paragraph element to 18px. Then I could use a CSS selector to target all paragraphs and place it inside the head section of the page.

Here’s the CSS:

 

 

   p {

 font-size: 18px;

 }

 

Here’s the HTML:

 

 

   <h2>How to Change Font Size in HTML</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.

</p>

<h3>The Explanation</h3>

<p>I’m using the W3Schools Tryit Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 14px, H2s are 30px, and H3s are 24px.  The default typeface is also Arial. That means changing the size of all paragraphs on the page will require me to use a CSS type selector and set the CSS font-size property  to "18px." The headings  on the page will their default sizes.

</p>



Here’s the result:

Using internal CSS, the font size of all paragraphs is changed to 18px

Image Source

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.

To continue to rewrite the first example using the obsolete font tag, let’s change the font color of a paragraph to maroon (hex color code #800000) with CSS. For this example, I’m going to use the W3Schools Tryit Editor and not load Bootstrap CSS. But if you do want to use that framework, the default font color is the same (ie. black) and so is the process.

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).

Here’s the HTML with inline CSS:

 

 

   <h2>How to Change Font Color in HTML</h2>

<p style="color: #800000">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.

</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default font color is black.(This is usually the case no matter what tool or framework you're using to build your web projects.) That means changing the color of a paragraph will require me to use a style attribute that contains the CSS color property set to the hex color code #800000. The other elements on the page are not targeted by inline CSS and therefore remain black.

</p>

 

Here’s the result:

Using internal CSS, the font color of the first paragraph is changed to maroon

Image Source

Now let’s say I want to change the color of every paragraph element to maroon. Then I could use a CSS selector to target all paragraphs and place it inside the head section of the page.

Here’s the CSS:

 

 

   p {

 color: #800000;

 }

Here’s the HTML:

 

 

   <h2>How to Change Font Color in HTML</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.

</p>

<h3>The Explanation</h3>

<p>Since I’m using the W3Schools Tryit Editor, the default font color is black. That means changing the color of all paragraphs on the page will require me to use a CSS type selector and set the CSS color property  to the hex color code for maroon (#800000). The headings  on the page will remain black.

</p>

 

Here’s the result:

Using internal CSS, the font color of all paragraphs is changed to maroon

Image Source

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

Changing Your Font with 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. If you’re building with the Bootstrap framework, check out more ways you can override the default settings in Bootstrap CSS to create a truly unique website.

New Call-to-action

 css introduction

Originally published Jul 27, 2020 7:00:00 AM, updated September 28 2020

Topics:

Bootstrap & CSS