CSS - @font-face Rule

Quiz

CSS @font-face rule allows us to use custom fonts not available in standard web-safe font options. We specify a unique name for the font and provide the path to the font file, enabling richer typography in the web development.

Syntax

@font-face {
  font-properties
}

Property Values

Font Property	Values	Description
font-family	name	It specifies the name of the font. Required
src	URL	It specifies the URL(s) from where the font has to be downloaded. Required.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	It specifies the stretch of the font. Optional. Default is normal.
font-style	normal italic oblique	It specifies the style of the font. Optional. Default is normal.
font-weight	normal bold (100-900) values	It specifies the weight of the font. Optional. Default is normal.
unicode range	unicode-range	It defines the range of unicode characters the font supports. Optional. Default value is "U+0-10FFFF"

Example of CSS @Font Face Rule

The following example explains the @font-face rule with different values.

Font Face Rule with Single Font

To use a custom font, we use the @font-face rule. Firstly, provide an identifier name and then provide the url of the font file. After this, the elements will be able to use the font name in the font-family property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        @font-face {
            font-family: "Sansation Light Font";
            src: url("/css/font/SansationLight.woff");
        }

        h1,
        p {
            font-family: "Sansation Light Font", serif;
        }

        p {
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>

<body>
    <h2>
        CSS @font-face rule
    </h2>
    <h1>
        TutorialsPoint
    </h1>
    <p>
        TutorialsPoint is an online platform offering free
        and comprehensive tutorials on a wide range of topics,
        including programming, web development, and 
        data science. It provides structured lessons, 
        examples, and exercises to support self-paced 
        learning and skill development.
    </p>
</body>

</html>

Font Face Rule with Multiple Fonts

To use multiple custom fonts, we use the @font-face rule. We separately provide identifier names along with specifying the url(s) of the font file. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        @font-face {
            font-family: "Sansation Light Font";
            src: url("/css/font/SansationLight.woff");
        }

        @font-face {
            font-family: "Bolder Text";
            src: url("/css/font/Brygada1918-Italic.ttf");
        }

        .top {
            font-family: "Sansation Light Font", serif;
        }

        .bottom {
            font-family: "Bolder Text", serif;
        }

        p {
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>

<body>
    <h2>
        CSS @font-face rule
    </h2>
    <h1 class="top">
        TutorialsPoint
    </h1>
    <p class="top">
        TutorialsPoint is an online platform offering free
        and comprehensive tutorials on a wide range of topics,
        including programming, web development, and 
        data science. It provides structured lessons, 
        examples, and exercises to support self-paced 
        learning and skill development.
    </p>
    <h1 class="bottom">
        TutorialsPoint
    </h1>
    <p class="bottom">
        TutorialsPoint is an online platform offering free
        and comprehensive tutorials on a wide range of topics,
        including programming, web development, and 
        data science. It provides structured lessons, 
        examples, and exercises to support self-paced 
        learning and skill development.
    </p>
</body>

</html>

Supported Browsers

Font format
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

* the font format works only if set to "installable"

css_properties_reference.htm

Print Page