A font file format is a specification for storing font data so web software can use it to render text. When you host fonts yourself, the format becomes part of the setup rather than an invisible detail. section 18.9
A self-hosted font setup connects three small pieces:
- The @font-face rule names the font and points to its file. section 18.9
- The format label tells the browser what kind of file it can use, such as woff2 or woff. section 18.9
- The URL must match the file's location: the same directory, a fonts subdirectory, or a path from the site's root. section 18.11
@font-face {
font-family: 'Font Name'; #1
src: url('font_filename.woff2') format('woff2'),
url('font_filename.woff') format('woff');
}
Read the declaration as a tiny map: give the font a name, then provide compatible files and their formats. section 18.9
A path that changes with the folder
If breeserif.woff2 sits beside the CSS file, use url('breeserif.woff2'). If it sits inside a fonts folder, use url('fonts/breeserif.woff2'). If fonts is beneath the site root, use url('/fonts/breeserif.woff2'). section 18.11
