@font-face is a CSS rule for giving a web page its own typeface instead of hoping every visitor already has the same system font installed. It points the browser to hosted font files, so the intended font can load with the page. section 18.5
A self-hosted font face has two small jobs:
- Give the face a name with font-family. That name is what page styles use when choosing the typeface. section 18.9
- Give the browser one or more font-file locations with src, including their formats. section 18.9
- Write each URL relative to the CSS or HTML file, or begin with / when the file lives under the site root. section 18.11
A font-face rule
This rule names a font and supplies WOFF2 and WOFF versions. Keep the font files in the same folder as the CSS file, or adjust each URL to match the folder where the files live. @font-face { font-family: 'Font Name'; src: url('font_filename.woff2') format('woff2'), url('font_filename.woff') format('woff'); } section 18.9 section 18.11
Web fonts can come from a third-party host or from your own server. Third-party hosting can be simpler, while self-hosting gives you control over the files but requires attention to licensing and file formats. A font needs permission for web use before you host it yourself. section 18.5 section 18.9
@font-face {
font-family: 'Font Name'; #1
src: url('font_filename.woff2') format('woff2'),
url('font_filename.woff') format('woff');
}
Use this compact template as a starting point, then replace the family name and filenames with your own licensed font files. section 18.9
