CSS @font-face rule

Last Updated : 09 Jun, 2023

The @font-face CSS at-rule rule is used to associate a font name that can be used in a style sheet. A font-family descriptor is used within the rule to name the font and an src descriptor is associated with an external font name. This can be used with downloadable fonts. This CSS @font-face rule can contain more than one property (max 24).

Syntax:

@font-face {
  font-family: fontName;
  src: url(fontFile path);
  font-stretch: font-stretch Property;
  font-weight: font-weight Property;
  font-style: font-style Property;
}

Parameter: The @font-face rule accepts four-parameter as described below:

font-family: It specifies the font of an element.
src: It is used to specify the location (URL) of the external resource ie., it holds the file path (url).
font-stretch: It is used to set the text wider or narrower.
font-weight: It is used to set the weight or thickness of the font being used with the HTML Text.
font-style: It is used to style the given particular text in a normal, italic, or oblique face from its font-family.

Few hosted font services: These services will provide you with various types of fonts.

Example 1: 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: 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>