How to Use CSS to Change Fonts on Web Pages

Set the font for specific words, paragraphs, or entire 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.

The screenshots below apply to the JSFiddle.net code playground, but the concepts that are described are true no matter where your code is implemented.

Illustration of a person changing fonts with css code on a computer screen
Derek Abella / Lifewire

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
    
    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 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; }
    
    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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Use CSS to Change Fonts on Web Pages." ThoughtCo, Sep. 30, 2021, thoughtco.com/change-fonts-using-css-3464229. Kyrnin, Jennifer. (2021, September 30). How to Use CSS to Change Fonts on Web Pages. Retrieved from https://www.thoughtco.com/change-fonts-using-css-3464229 Kyrnin, Jennifer. "How to Use CSS to Change Fonts on Web Pages." ThoughtCo. https://www.thoughtco.com/change-fonts-using-css-3464229 (accessed March 19, 2024).