Fonts
Three slots - heading, body, mono - each from any of three sources. Every component reads --my-font-heading/body/mono, so swapping a family later touches exactly one file: abstracts/_fonts.scss.
System stacks (fastest)
Zero network requests, no layout shift - the classic choice for body text. Pick from curated stacks in the builder or type your own.
Google Fonts
Any family, previewed live in the builder. The generated abstracts/_fonts.scss loads weights 400/500/700 via @import; for a faster first paint the README shows the <link> alternative to put in your <head> instead.
Self-hosted (@font-face)
Pick “custom” and the ZIP scaffolds @font-face rules for Regular/Medium/Bold plus an assets/fonts/ folder that tells you exactly which .woff2 files to drop in. Best for brand fonts you licence yourself - no third-party requests, GDPR-friendly.
Heading personality
Heading weight (400–800) and case (normal / uppercase) are tokens too - --my-heading-weight and --my-heading-transform - so every heading, card title and hero follows one decision.
Swapping later
// abstracts/_fonts.scss - change one line, recompile:
$font-heading: 'Fraunces', serif;
npm run build:cssOr reopen your configuration on the builder (free rebuilds from your download link) and pick a different family there.