How to Use CSS to Change Fonts on Web Pages

Simple styling options let you change a web page's font using Cascading Style Sheets. Use CSS to set the font of individual words, specific sentences, headlines, whole paragraphs, and even entire pages of text.

How to Change the Font With CSS

Make the HTML and CSS changes explained below using any HTML editor or text editor.

1. Locate the text where you want to change the font. We'll use this as an example:

   This text is in Arial
   

2. Surround the text with the SPAN element:

   This text is in Arial
   

3. Add the attribute style="" to the span tag:

   This text is in Arial
   

4. Within the style attribute, change the font using the font-family style.

   This text is in Arial
   

5. Save the changes to see the effects.

Tips for Using CSS to Change Font

1. The best approach is to always have at least two fonts in your font stack (the list of fonts), so that if the browser doesn’t have the first font, it can use the second font instead.

   Separate multiple font choices with a comma, like this:

   font-family: Arial, Geneva, Helvetica, sans-serif;
   

2. The example outlined above uses inline styling, but the best kind of styling uses an external style sheet to modify more than just the one element. Use a class to set the style on blocks of text.

   This text is in Arial

   In this example, the CSS file to style the above HTML would appear as follows:

   .arial { font-family: Arial; }
   

3. Always end CSS styles with a semicolon (;). It's not required when there's only one style, but it's a good habit to start.