Skip to content
Related Articles

Related Articles

CSS @font-face rule

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Aug, 2022
View Discussion
Improve Article
Save Article

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>

Output: 
 

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

Supported Browsers: The browsers supported by CSS @font-face rule are listed below:

  • Google Chrome 1 and above (TTF/OTF, WOFF, WOFF2 and SVG)
  • Edge 12 and above
  • Firefox 3.5 and above (TTF/OTF, WOFF and WOFF2)
  • Safari 3.1 and above (TTF/OTF, WOFF and SVG)
  • Opera 10 and above ( TTF/OTF, WOFF, WOFF2 and SVG)

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!