How to Change the Font on Web Pages Using CSS

Sky Noir Photography by Bill Dickinson / Getty Images

The FONT element was deprecated in HTML 4 and is not part of the HTML5 specification. So, if you want to change the fonts on your web pages, you should learn how to do it with CSS (Cascading Style Sheets).

Steps to Changing the Font With CSS

  1. Open a web page using a text HTML editor. It can be a new or existing page.
  2. Write some text: This text is in Arial
  3. Surround the text with the SPAN element: This text is in Arial
  4. Add the attribute style="" to the span tag: This text is in Arial
  5. Within the style attribute, change the font using the font-family style: This text is in Arial

Tips for Changing the Font With CSS

  1. Separate multiple font choices with a comma (,). For example,
    1. font-family: Arial, Geneva, Helvetica, sans-serif;
    2. It’s best 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 instead.
  2. Always end each CSS styles with a semi-colon (;). It's not required when there is only one style, but it's a good habit to get into.
  3. This example uses inline styles, but the best type of styles are put in external style sheets so that you can affect more than just the one element. You can use a class to set the style on blocks of text. For example:
    1. class="arial">This text is in Arial
    2. Using the CSS:
    3. .arial { font-family: Arial; }