The CSS @font-face at-rule lets a page use web fonts: font files hosted online and loaded by the browser. It reduces uncertainty caused by relying on fonts installed on each visitor’s computer. section 18.2
A basic @font-face rule identifies the font and where the browser can find it:
- font-family gives the downloaded font a name, such as 'Bree Serif'. section 18.4
- src lists font files with their URLs and formats; multiple entries can provide WOFF2 and WOFF alternatives. section 18.4
- A normal selector then uses the declared name, such as ul { font-family: 'Bree Serif'; }. section 18.4
@font-face {
font-family: 'Bree Serif'; #1
src: url('/fonts/breeserif.woff2') format('woff2'),
url('/fonts/breeserif.woff') format('woff');
}
ul {
font-family: 'Bree Serif'; #1
}
See a complete rule that declares Bree Serif, supplies WOFF2 and WOFF files, and applies the font to a list. section 18.4
Hosting a font yourself
Place the font files on the same server as the page, then point src at their paths. Self-hosting avoids dependence on a remote server but adds complexity: verify that the font license permits web use and obtain a suitable web font format. Modern browsers support WOFF2; WOFF can serve as an additional format. section 18.4
