How to set the font family of text using CSS ?

Last Updated : 23 Dec, 2020

The CSS font property is used to set the fonts content of HTML element. The font-family property specifies the font of an element. It can have multiple fonts as a backup system i.e. if the browser doesn’t support one font then the other can be used.

Syntax:

element_selector {
   font-family: fonts-name | initial | inherit;
}

Property values:

fonts-name: The names of the font in quotes separated by commas.
initial: It sets the property to its default value.
inherit: It inherits the property from the parent element.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to set font family 
        of text using CSS ? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        .para1 { 
            font-family: "Impact", Times, serif; 
        } 
  
        .para2 { 
            font-family: Arial, Helvetica, sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
        How to set font family 
        of text using CSS ? 
    </h2> 
  
    <p class="para1"> 
        GeeksforGeeks in Impact font 
    </p> 
  
  
    <p class="para2"> 
        GeeksforGeeks in Arial font 
    </p> 
  
</body> 
  
</html>