https://github.com/planetabhi/system-fonts-stack
Lightning-fast fonts. No downloads, no delays.
https://github.com/planetabhi/system-fonts-stack
fonts geometric grotesque humanist monospace-font slab-serif stack system system-fonts system-ui
Last synced: 3 months ago
JSON representation
Lightning-fast fonts. No downloads, no delays.
- Host: GitHub
- URL: https://github.com/planetabhi/system-fonts-stack
- Owner: planetabhi
- License: other
- Created: 2024-08-15T13:12:51.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-30T17:52:04.000Z (about 1 year ago)
- Last Synced: 2025-10-08T01:37:34.329Z (8 months ago)
- Topics: fonts, geometric, grotesque, humanist, monospace-font, slab-serif, stack, system, system-fonts, system-ui
- Language: SCSS
- Homepage: https://system-fonts-stack.netlify.app/
- Size: 68.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# System Fonts Stack
SCSS, CSS system fonts stack.
### Install
Install from your terminal via npm.
```
npm i system-fonts-stack
```
### Usage
```scss
// 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](https://modernfontstacks.com/)