Open In App
Related Articles

CSS font-family Property

Improve Article
Save Article
Like Article

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. In other words, this property is used to specifies the family-name &/or generic-family, based on the priority from the list, for the selected element.

The font-family can be categorized into 2 types:

  • family-name: It contains the name of a font-family, such as “times”, “courier”, “arial”, etc.
  • generic-family: It contains name of a generic-family, such as”serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.


element_selector {
    font-family: family-name|generic-family|initial|inherit;

Property values:

  • fonts-name: This specifies the name of the font in quotes separated by commas.
  • generic-family: It is used to set the font of text in an HTML document from the list of available fonts from the font pool.
  • initial: It is used to set an element’s CSS property to its default value.
  • inherit: It is used to inherit a property to an element from its parent element property value.

Note: The font-name can be declared with the single quotes when using the style attribute in the HTML & also it must be quoted when it contains white space.

We will understand the usage of the font-family property by implementing it.

Example: This example illustrates the use of the font-family property.


<!DOCTYPE html>
    <title> CSS | font-family Property </title>
    .para1 {
        font-family: "Impact", Times, serif;
    .para2 {
        font-family: Arial, Helvetica, sans-serif;
    <h1>Font-family Property</h1>
    <p class="para1">GeeksforGeeks in Impact font</p>
    <p class="para2">GeeksforGeeks in Arial font.</p>


Supported Browsers: The browsers that support the font-family property, are listed below:

  • Google Chrome 1.0
  • Internet Explorer 3.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 13 Oct, 2021
Like Article
Save Article
Similar Reads
Related Tutorials