SCSS, CSS system fonts stack.
Install from your terminal via npm.
npm i system-fonts-stack
// Place this at the top of your SCSS/CSS file
@import "system-fonts-stack";| Fonts | Variables | Utilities |
|---|---|---|
| System UI | --system-ui |
.sfs-system-ui |
| Transitional | --transitional |
.sfs-transitional |
| Old Style | --old-style |
.sfs-old-style |
| Humanist | --humanist |
.sfs-humanist |
| Geometric Humanist | --geometric-humanist |
.sfs-geometric-humanist |
| Classical Humanist | --classical-humanist |
.sfs-classical-humanist |
| Neo Grotesque | --neo-grotesque |
.sfs-neo-grotesque |
| Monospace Slab Serif | --monospace-slab-serif |
.sfs-monospace-slab-serif |
| Monospace Code | --monospace-code |
.sfs-monospace-code |
| Industrial | --industrial |
.sfs-industrial |
| Rounded Sans | --rounded-sans |
.sfs-rounded-sans |
| Slab Serif | --slab-serif |
.sfs-slab-serif |
| Antique | --antique |
.sfs-antique |
| Didone | --didone |
.sfs-didone |
| Handwritten | --handwritten |
.sfs-handwritten |
Ref. Modern Font Stacks