How To Change the Font Using CSS

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

Difficulty: Average

Time Required: 5 minutes

Here's How:

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

Tips:

  1. Separate multiple font choices with a comma (,). For example:
    font-family: Arial, Geneva, Helvetica, sans-serif;
    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:
    <span class="arial">This tex is in Arial</span>
    Using the CSS:
    .arial { font-family: Arial; }

    What You Need:

    • HTML Editor -or-
    • Text Editor