The CSS @font-face Rule
The CSS @font-face rule allows you to define and load custom fonts for use on a webpage.
The font does not have to be installed on the user's computer.
When you have found/bought the font you want to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Common Font Formats
The most widely used font formats are WOFF/WOFF2 for web pages and TTF/OTF for desktop.
WOFF/WOFF2 (Web Open Font Format)
WOFF/WOFF2 are optimized to reduce file size and are the ideal font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF/WOFF2 are supported by all major browsers.
TTF (TrueType Fonts) and OTF (OpenType Fonts)
TTF was developed in the late 1980s, by Apple. OTF was developed by Apple and Microsoft. TTF is the most common font format for both the Mac OS and Microsoft Windows operating systems. OTF is built on TTF, as a more advanced, scalable format that supports rich typesetting features. Both types are popular because of their accessibility and quality, but they are not optimized for web use.
Use Your Custom Font
In the @font-face rule; first specify a name for the custom font (e.g. "myFont") in the font-family descriptor, then point to the font file in the src descriptor.
Then, to use the custom font in an HTML element, refer to the name of the font ("myFont") through the font-family property:
Example
@font-face {
font-family: myFont; /* set name */
src: url(sansation_light.woff); /* url of the font */
}
p {
font-family: myFont; /* use font */
}Live preview
Bold Custom Font
You must add another @font-face rule containing descriptors for bold text:
Example
@font-face {
font-family: myFont;
src: url(sansation_bold.woff);
font-weight: bold;
}Live preview
The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this file whenever a piece of text with the font-family "myFont" should render as bold.
Tip
This way you can have many @font-face rules for the same font.
CSS @font-face Descriptors
The following table lists the font descriptors that can be defined inside the @font-face rule:
| Descriptor | Description |
|---|---|
| font-family | Required. Defines a name for the font |
| src | Required. Defines the URL of the font file |
| font-stretch | Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | Optional. Defines the weight of the font. Default is "normal" |
| font-display | Optional. Defines how the font loads and displays. Default is "auto" |
| unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |