Foundations
Font Family
KitFront starter kits include default Google Fonts used across headings, body text, buttons, forms, and selected decorative text.
Default fonts
Both Bootstrap and Tailwind starters include the same default font families:
- Bricolage Grotesque — heading font for H1–H6, hero titles, and section headings.
- Cormorant — secondary heading font used in selected decorative text.
- DM Sans — body font for paragraphs, navigation, buttons, forms, and general text.
Font tokens
Bootstrap font tokens are defined in assets/css/core.css.
--kf-heading-font: 'Bricolage Grotesque', sans-serif;
--kf-heading-font-secondary: 'Cormorant', serif;
--kf-body-font: 'DM Sans', sans-serif;Using your own fonts
Replace the Google Fonts link in index.html, then update the font tokens in assets/css/core.css.
Font tokens
Tailwind font tokens are defined in src/assets/css/input.css inside @theme.
--font-kf-heading-font: 'Bricolage Grotesque', sans-serif;
--font-kf-heading-font-secondary: 'Cormorant', serif;
--font-kf-body-font: 'DM Sans', sans-serif;Using your own fonts
Replace the Google Fonts link in src/index.html, then update the font tokens in src/assets/css/input.css.