How to change the font type, size, and color on a web page

Updated: 08/16/2021 by Computer Hope

This page contains instructions on how to change a font and its color on an HTML (HyperText Markup Language) web page. With the introduction of HTML5, the proper way to now configure web page fonts is to use CSS (Cascading Style Sheets). The old method, of using an inline style attribute or font tag, is deprecated, and should no longer be used.

Note

Although the deprecated methods may still render correctly in modern Internet browsers, they are no longer guaranteed to do so. To create web pages that display correctly for the maximum number of users, use the CSS methods described on this page.

Tip

The methods for changing font attributes on this page work for text contained in most HTML tags, including <div>, <p>, and <span>. These methods also work for text in a table, using the <table>, <tr>, and <td> tags.

Using CSS for a single application

If you plan on changing the font face and its color for one word, sentence, or paragraph on a web page, configure its attributes in the element tag. Using the style attribute, you may specify the font face and color with font-family, color, and the font size with font-size, as shown in the example below.

Example code

<p style="font-family:Courier; color:Blue; font-size: 20px;">This text has the font Courier, is Blue, and 20px.</p>

Result

This text has the Courier font, is Blue, and 20px in size.

Using CSS for one or more pages

Custom font for one page

In the head portion of your web page, insert code between the <style></style> tabs to change the appearance of your text in various elements. The next blue box contains example code that, once called, would change the font face to Courier and color it red. As shown below, we defined the class name as "custom."

<style type="text/css">
.custom {
 font-family: Courier;
 color: red;
 font-size:20px;
}
</style>

Once defined, this styling can be applied to most elements in your page by attaching the class "custom" to them. The following box shows two lines of code and their respective results.

Example

<p class="custom">This whole sentence is red and Courier</p>
<p>Only the word <span class="custom">test</span> is red and Courier.</p>

Result

This whole sentence is red and Courier.

Only the word test is red and Courier.

Custom font for many pages

Importing an external CSS file can be very beneficial in that it allows users to change rules for multiple pages at the same time. The following section shows an example for creating a basic CSS file that changes the font and it's color for most elements. This file may be loaded into more than one web page, even an entire site.

Using any basic text editor, saving the following text as a .css file will prepare it for import.

@charset "utf-8";
.courier {
 font-family: Courier;
 color: #005CB9;
}

Once the preceding text is placed in a .css file (we have named ours basic.css), link to it from any other page using a line similar to the following example.

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Tip

Users may change the attributes of elements on a page by changing the code in the imported .css file.

Using the font tag

Although deprecated, the HTML <font> tag can still be used and may be necessary to be used with some online services. When using the font tag, you must include the face attribute, which describes the font to be used. In the example below, we are using the Courier font and the hexadecimal color code #005CB9, which is dark blue.

Example code

<font color="#005CB9" face="courier" size="5">A special font example.</font>

Result

A special font example.