CSS @font-face rule - GeeksforGeeks

25 Nov, 2021
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.
Fonts.com
Google Fonts
Typotheque
Typography
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 fo 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 (TTF/OTF, WOFF, WOFF2 and SVG)
Internet Explorer (TTF/OTF, WOFF and EOT)
Firefox (TTF/OTF, WOFF and WOFF2)
Safari TTF/OTF, WOFF and SVG)
Opera TTF/OTF, WOFF, WOFF2 and SVG
bhaskargeeksforgeeks
varshagumber28
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set div width to fit content using CSS ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript