The CSS @font-face Rule
Web pages are not limited to fonts already installed on the visitor's computer. Once you have found a font you like, put its file on your web server and define it with the CSS @font-face rule. The browser then downloads it automatically whenever it is needed.
Common Font Formats
Two groups of font formats are used more than any others: WOFF/WOFF2 on web pages and TTF/OTF on the desktop.
WOFF and WOFF2 (Web Open Font Format): Because they are built for small file sizes, these formats suit web pages best, and all major browsers support them. WOFF dates from 2009 and has since become a W3C Recommendation.
TTF and OTF (TrueType Fonts and OpenType Fonts): Apple created TTF in the late 1980s, and it remains the most common format on both Mac OS and Microsoft Windows. OTF, from Microsoft and Adobe, extends TTF into a more advanced, scalable format with rich typesetting features. Both have become popular thanks to their accessibility and quality, though neither has been optimized for web use.
Use Your Custom Font
Two descriptors set up a custom font inside @font-face: font-family gives it a name (e.g. "myFont"), and src points to its file.
An HTML element then picks up the font when its font-family property uses that name.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Font Usage</title>
<style>
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
p {
font-family: myFont;
}
</style>
</head>
<body>
<h1>Custom Font Example</h1>
<p>This paragraph uses a custom font called "myFont", loaded with the @font-face rule.</p>
</body>
</html>
Bold Custom Font
Bold text needs its own @font-face rule, containing descriptors for the bold version.
The bold characters live in a separate font file, and browsers turn to it whenever text in that font family has to render as bold.
Tip: You are free to write many @font-face rules for one font.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold Custom Font</title>
<style>
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
p {
font-family: myFont;
}
</style>
</head>
<body>
<h1>Bold Custom Font Example</h1>
<p>This text uses the regular version of the custom font.</p>
<p><b>This text uses the bold version of the custom font.</b></p>
</body>
</html>
CSS @font-face Descriptors
These font descriptors can go inside @font-face:
font-family— Required. The name you give the font.src— Required. The URL where the font file can be found.font-stretch— Optional. How the font is stretched. The default is "normal".font-style— Optional. How the font is styled. The default is "normal".font-weight— Optional. How heavy the font is. The default is "normal".font-display— Optional. How loading and display of the font behave. The default is "auto".unicode-range— Optional. Which Unicode characters are supported by the font. The default is "U+0-10FFFF".