Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :