VOOZH about

URL: https://www.geeksforgeeks.org/css/css-font-face-rule/

⇱ CSS @font-face rule - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

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(fontFile path);
 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.

Output:

👁 Image

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.

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