CSS @font-face rule

Last Updated : 14 Jul, 2025

The @font-face rule in CSS is used to include custom fonts on web pages. This allows you to use any font without needing it to be installed on the user's device, ensuring that your web design stays consistent with your brand's typography.

By adding custom fonts, you can create unique designs, maintain a strong brand identity, and improve the user experience with visually appealing fonts.

Syntax

@font-face {
  font-family: fontName;
  src: url(https://www.geeksforgeeks.org/fontFile%20path);
  font-stretch: font-stretch Property;
  font-weight: font-weight Property;
  font-style: font-style Property;
}

Key Properties of the @font-face Rule

Here’s a table of key properties of the @font-face rule:

PropertyDescription
font-familySpecifies the name of the custom font to be used in the CSS.
srcDefines the location (URL) of the external font file.
font-stretch:Adjusts whether the font is displayed wider or narrower than its normal width.
font-weightSets the weight or thickness of the font (e.g., normal, bold, or specific numerical values like 400, 700).
font-styleDetermines whether the text is displayed in normal, italic, or oblique style.

Few hosted font services

These services will provide you with various types of fonts.

CSS @font-face rule Exmples

Here are some examples of CSS font -face rules :

Example 1: Basic Usage

This example illustrates the use of the @font-face rule to specify the different font properties to decorate the text accordingly.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS @font-face rule</title>
    <style>
        @font-face {
            font-family: fontName;
            src: url(sansation_light.woff);
        }

        @font-face {
            font-family: fontName;
            src: url(sansation_bold.woff);
            font-weight: bold;
        }

        div {
            font-family: fontName;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div>A Computer Science Portal for Geeks</div>
    </center>
</body>
</html>

Output:

Example 2: Multiple Font Weights and Styles

This example illustrates the use of the @font-face rule by specifying the source of the file path along with its format.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS @font-face rule</title>
    <style type="text/css">
        @font-face {
            font-family: "OpenSans";
            src: url("/examples/fonts/OpenSans-Regular.eot");
            src: url("/examples/fonts/OpenSans-Regular.ttf") format("truetype");
            font-stretch: normal;
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: "OpenSansBold";
            src: url("/examples/fonts/OpenSans-Bold.eot");
            src: url("/examples/fonts/OpenSans-Bold.ttf") format("truetype");
            font-stretch: normal;
            font-weight: normal;
            font-style: normal;
        }

        /* Specify the OpenSans bold font */

        h1 {
            font-family: "OpenSansBold", Arial, sans-serif;
            color: green;
        }

        p {
            font-family: "OpenSans", Arial, sans-serif;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p>A Computer Science Portal for Geeks</p>
    </center>
</body>

</html>

Output: 

font-face multiple font output

Note: There is 5 Font format those are: TTF/OTF, WOFF, WOFF2, SVG, and EOT. 

Browser Supports

The @font-face rule is supported by all major browsers, including:

Comment

Explore