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 Format | Chrome | Firefox | Edge | Safari | Opera |
| TTF/OTF | 4.0 | 3.5 | 9.0* | 3.1 | 10.0 |
| WOFF | 5.0 | 3.6 | 9.0 | 5.1 | 11.1 |
| WOFF2 | 36.0 | 39.0 | 14.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | Not supported | Not supported | 6.0 | Not supported | Not supported |
Enjoy coding!
Read also:
HTML Text Formatting And Styles