html

CSS Font-Family Property

CSS offers various properties to customize the font style of a text element. From changing font size and color to set font family, every property has its own significance. The text formats also highly affect the website’s readability; therefore, selecting the right font is crucial for making your website accessible.

This write-up will discuss CSS font-family property with the help of suitable examples. So, let’s start!

CSS font-family property

The “font-family property” lists typefaces in priority order. The font selection does not end with the first font in the user’s system’s font list. Instead, fonts are chosen one character at a time, such that if an available font lacks a glyph for a required letter, the subsequent fonts are attempted.

The selection of the font family is impacted by the characteristics such as the availability of a typeface in a few styles, versions, or sizes.

Types of CSS font-family names

The font-family property contains a list of font families separated by commas. CSS font-family names are divided into two types of names:

  • font family-name: A font-family name is the name of the typeface. Font families comprise names such as “Helvetica” and “Times“. The font-family name may contain white spaces, so it should be given in quotes as: “Comic Sans MS”.
  • generic family-name: When none of the specified fonts are accessible, generic font families serve as a fallback option. You do not have to specify the generic family name in quotes because they are keywords, and their font family names list should end with a generic font family.

Now let’s check out an example of utilizing both family-name and generic family-name as font-family names.

Example: CSS font-family property

In the below-given example, we will define the value of the first font-family property by specifying “Time new Roman” as font family-name, and “Times”, and “serif” as generic family-name. Whereas, in the second font-family, “Arial”, “Helvetica,” and “sans-serif” are added as generic family names:

<!DOCTYPE html>

<html>

<head>

    <style>

        p.a {

            font-family: "Times New Roman", Times, serif;

        }

        p.b {

            font-family: Arial, Helvetica, sans-serif;

        }

    </style>

</head>

<body>

    <h1>The font-family Property</h1>

    <p class="a">It is a "Times New Roman" font.</p>

    <p class="b">It is an "arial" font.</p>

</body>

</html>

After saving the added code, when you will open your HTML in the browser, it will show the font style of the text elements according to the specified values of the font family name and generic family name:

We will now demonstrate the usage of different keywords involved in the generic family category.

CSS Serif generic-family category

The glyphs that have finished strokes or actual serifed endings are referred to as “serif”. This category of generic-family includes Times new roman, Georgia, Garamond, and many more font families.

Example: CSS Serif generic-family category

<!DOCTYPE html>

<html>

<head>

    <style>

        p.a {

            font-family: "Times New Roman", Times, serif;

        }

    </style>

</head>

<body>

    <h1>The font-family Property</h1>

    <p class="a">It is a "Times New Roman" font that belongs to the serif font family.</p>

</body>

</html>

Output

CSS sans-serif generic-family category

Unlike serif, the glyphs in sans-serif have plain stroke endings. For example, Lucida Sans, Open Sans, Arial, Lucida Sans Unicode,  Helvetica,Trebuchet MS, Fira Sans are included in the sans-serif generic-family category.

Example: CSS sans-serif generic-family category

<!DOCTYPE html>

<html>

<head>

    <style>

        p.a {

            font-family: Arial, Helvetica, sans-serif;

        }

    </style>

</head>

<body>

    <h1>The font-family Property</h1>

    <p class="a">It is an "Arial" font that belongs to the sans-serif font family.</p>

</body>

</html>

Output

CSS monospace generic-family category

All such glyphs with a uniform and fixed-width throughout are termed monospace—for example, “Lucida Console”, “Courier New”, “Mono”.

Example: CSS monospace generic-family category

<!DOCTYPE html>

<html>

<head>

    <style>

        p.a {

            font-family: "Lucida Console", "Courier New", monospace;

        }

    </style>

</head>

<body>

    <h1>The font-family Property</h1>

    <p class="a">It is a "Lucida" font that belongs to the monospace font family</p>

</body>

</html>

Output

CSS Cursive generic-family category

Unlike italic typefaces, cursive glyphs usually feature connecting strokes or other cursive traits. The typeface resembles brush writing or a handwritten pen rather than printed lettering. The glyphs are either joined partially or entirely—some font names like “Comic Sans MS“, and many others.

Example: CSS Cursive generic-family category

<!DOCTYPE html>

<html>

<head>

    <style>

        p.a {

            font-family: "Comic Sans MS", cursive;

        }

    </style>

</head>

<body>

    <h1>The font-family Property</h1>

    <p class="a">It is "Comic Sans MS" font that belongs to the cursive font family</p>

</body>

</html>

Output

We have compiled the essential information related to CSS font-family property. You can further explore it according to your preferences.

Conclusion

The CSS font-family property is used to specify the family name of the font or text. CSS font-family names are divided into two types: “font family-name” and “generic family-name”, where font-family name is the name of the typeface, and generic font families serve as a fallback option.  The CSS font-family property can take a list of font families that are separated by commas. This write-up discussed CSS font-family property with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.