Snippets for importing fonts.
- File paths assume the font files are stored in a sibling folder to your CSS. Edit the paths to suit your project.
- Font-weight naming follows these common practices, listed below with minor changes for also-known-as weights.
- In our snippets, weight 400 (normal or 'Regular') is not named; weight 700 is named 'bold'.
| Value | Common weight names |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light, aka Thin) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold, aka Heavy) |
| 900 | Black (Heavy) |