How to Use CSS to Change the Font on Web Pages

Set the font for specific words, paragraphs, or whole pages

Type blocks for hot type in typesetting
Sky Noir Photography by Bill Dickinson / Getty Images

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

How to Change the Font With CSS

You can make the HTML and CSS changes explained below using any HTML editor or text editor. You can either copy the text from the page and paste it into an editor to do the changes there or open the whole web page in the editor and edit directly.

  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:

    <span>This text is in Arial</span>
  3. Add the attribute style="" to the span tag:

    <span style="">This text is in Arial</span>
  4. Within the style attribute, change the font using the font-family style.

    <span style="font-family:Arial">This text is in Arial</span>
    Screenshot of font-family options in HTML
    Jon Fisher
  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 explained above uses inline styling, but the best kind of styling uses an external style sheet so that you can affect more than just the one element. You can use a class to set the style on blocks of text.

    <div class="arial"><p>This text is in Arial</p></div>

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

    .arial { font-family: Arial; }
    Screenshot of external CSS font-family options
    Jon Fisher
  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.