CSS Font Family

CSS font-family property is used to set the font face of the text on the webpage. For example,

h1 {
    font-family: Courier, monospace;
}

Browser Output

CSS Font Family Example Description

Here, font-family sets the font face of h1 element to Courier, monospace.


CSS Font Family Types

Font families are divided into two types:

  • Generic family: Refers to the category of the fonts that share similar design characteristics. For example, Serif, sans-serif, Cursive, etc.
  • Font family: Refers to the specific font family name like Helvetica, Arial, Georgia, etc.

CSS Font Family Syntax

The syntax of the font-family property is as follows:

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

Here,

  • family-name: refers to the specific font family like Arial, Helvetica, etc
  • generic-family: refers to the broader category of font families with similar design characteristics like serif, sans-serif, etc
  • initial: sets font-family to the default value
  • inherit: inherits font-family from the parent

Let's see an example,

h1    {
    font-family: "Source Sans Pro", "Arial", sans-serif;
}

In the above example, the browser will first try to render Source Sans Pro. If it is not available, the browser will try to render Arial. And if it is also not available, the browser will finally use a font from the sans-serif family.

The multiple font family names should be separated by a comma and if the font family name consists of multiple words then it should be enclosed in double quotation marks.


CSS Generic Font Family Types

There are five generic families in CSS which refer to the broader category of font families with similar design characteristics.

Serif

Serif fonts have a small line or stroke at the end of each character. They are used in traditional printed materials like books, magazines, etc, and in formal documents like resumes or business letters. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Serif Family</title>
    </head>

    <body>
        <h1>Serif font families</h1>

        <p class="times-new-roman">Times New Roman font</p>
        <p class="georgia">Georgia font</p>
    </body>
</html>
h1 {
    font-family: "Times New Roman", serif;
}

p.times-new-roman {
    /* sets the text to "Times New Roman" */
    font-family: "Times New Roman";
}

p.georgia {
    /* sets the text to Georgia */
    font-family: Georgia;
}

Browser Output

CSS Serif Font Description

Some popular serif font families are Times New Roman, Georgia, Garamond, Palatino, etc.


Sans-Serif

Sans-Serif fonts do not have the small line or stroke at the end of characters. They are seen as clean and modern so often used in digital interfaces and online content. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>sans-serif Family</title>
    </head>

    <body>
        <h1>Serif-Serif font families</h1>

        <p class="helvetica">Helvetica font</p>
        <p class="arial">Arial font</p>
    </body>
</html>
h1 {
    font-family: Helvetica, Arial, sans-serif;
}
p.arial {
    /* sets the text to Helvetica font*/
    font-family: Helvetica;
}

p.helvetica {
    /* sets the text to Arial font */
    font-family: Arial;
}

Browser Output

CSS Sans-serif Font Description

Some popular sans-serif font families are Open Sans, Poppins, Helvetica, Arial, etc.


Monospace

Monospace fonts have uniform spacing between all the characters. They are used in programming code and text editors as they are easy to read. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Monospace Family</title>
    </head>

    <body>
        <h1>Monospace font families</h1>

        <p class="courier">Courier font</p>
        <p class="consolas">Consolas font</p>
    </body>
</html>
h1 {
    font-family: Courier, monospace;
}
p.courier {
    /* sets the text to Courier font*/
    font-family: Courier;
}

p.consolas {
    /* sets the text to Consolas font */
    font-family: Consolas;
}

Browser Output

CSS Monospace Font Description

Some popular sans-serif font families are Fira Mono, Courier, Consolas, etc.


Cursive

Cursive fonts have the joining strokes of characters and imitate the handwriting. They are often used for decorative purposes on web pages. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Cursive Family</title>
    </head>

    <body>
        <h1>Cursive font families</h1>

        <p class="lucida-handwriting">Lucida Handwriting font</p>
        <p class="segoe-script">Segoe Script font</p>
    </body>
</html>
h1 {
    font-family: "Lucida Handwriting", cursive;
}

p.lucida-handwriting {
    /* sets the text to Lucida Handwriting font*/
    font-family: "Lucida Handwriting";
}

p.segoe-script {
    /* sets the text to Segoe Script font */
    font-family: "Segoe Script";
}

Browser Output

CSS Cursive Font Description

Some popular cursive font families are Lucida Handwriting, Apple Chancery, Brush Script, etc.


Fantasy

Fantasy fonts are primarily decorative fonts. They are used for creative and playful design projects. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Fantasy Family</title>
    </head>

    <body>
        <h1>Fantasy font families</h1>

        <p class="papyrus">Papyrus font</p>
        <p class="harrington">Harrington font</p>
    </body>
</html>
h1 {
    font-family: Papyrus, fantasy;
}
p.papyrus {
    /* sets the text to Papyrus */
    font-family: Papyrus;
}

p.harrington {
    /* sets the text to Harrington */
    font-family: Harrington;
}

Browser Output

CSS Fantasy Font Description

Some popular fantasy font families are Papyrus, Harrington, Wisp, Arkana, Rivendell, etc.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges