Categories
Web development

CSS @font-face Rule

CSS @font-face Rule

The CSS @font-face rule allows web designers to use custom fonts.

The custom font can be loaded from a locally-installed font on the user’s computer or a remote server.

Syntax:

@font-face {
  font-properties
}

font-family – (required) specifies the name of the font.

src – (required) specifies the URL(s) where the font is downloaded from.

font-stretch (normal/ condensed/ ultra-condensed/ extra-condensed/ semi-condensed/ expanded/ semi-expanded/extra-expanded/ ultra-expanded) – (optional) specifies how the font should be stretched (the default value is “normal”).

font-style (normal/ italic/ oblique) – (optional) specifies how the font should be styled (the default value is “normal”).

font-weight (normal/ bold/ 100/ 200/ 300/ 400/ 500/ 600/ 700/ 800/ 900)- (optional) specifies the boldness of the font. (the default value is “normal”).

unicode-range – (optional) specifies the range of unicode characters the font supports (the default value is “U+0-10FFFF”).

Example1:

Using the CSS @font-face rule you need first specify a name for the font (e.g. Pacifico), and then point to the font file (src):

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: Pacifico;
  src: url(https://lenadesign.org/wp-content/uploads/2021/11/Pacifico-Regular.ttf);
}

p {
  font-family: Pacifico;
}
</style>
</head>
<body>

<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>

</body>
</html>

Output:

With the CSS @face-font rule, you can use custom fonts on the website.


Example2:

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: amatic;
  src: url(https://lenadesign.org/wp-content/uploads/2021/11/AmaticSC-Regular.ttf);
}

p {
  font-family: amatic;
  font-size:30px;
}
</style>
</head>
<body>

<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>

</body>
</html>

Output:

With the CSS @face-font rule, you can use custom fonts on the website.


Browser Support for Font Formats:

Font FormatChromeFirefoxEdgeSafariOpera
TTF/OTF4.03.59.0*3.110.0
WOFF5.03.69.05.111.1
WOFF236.039.014.010.026.0
SVGNot supportedNot supportedNot supported3.2Not supported
EOTNot supportedNot supported6.0Not supportedNot supported

Enjoy coding!

Read also:

CSS @import Rule

HTML Text Formatting And Styles

CSS Styling Links