Science, Tech, Math › Computer Science How to Use CSS to Change Fonts on Web Pages Set the font for specific words, paragraphs, or entire web pages Share Flipboard Email Print Science, Tech, Math PHP Programming Perl Python Java Programming Javascript Programming Delphi Programming C & C++ Programming Ruby Programming Visual Basic View More By Jennifer Kyrnin Jennifer Kyrnin Writer University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. Learn about our Editorial Process Updated on November 05, 2020 Reviewed by Jon Fisher Reviewed by Jon Fisher Wichita Technical Institute Jonathan Fisher is a CompTIA certified technologist with more than 6 years' experience writing for publications like TechNorms and Help Desk Geek. Learn about our Editorial Process 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. 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. Locate the text where you want to change the font. We'll use this as an example: This text is in Arial Surround the text with the SPAN element: This text is in Arial Add the attribute style="" to the span tag: This text is in Arial Within the style attribute, change the font using the font-family style. This text is in Arial Jon Fisher Save the changes to see the effects. Tips for Using CSS to Change Font 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; 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; } Jon Fisher 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. Cite this Article 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 June 3, 2023). copy citation Featured Video