Customization

Font Family

KitFront starter kits come with carefully selected Google Fonts by default. These fonts are used throughout all sections to maintain a consistent visual style.

Default fonts

The Bootstrap and Tailwind starter kits include the following Google Fonts by default:

Bricolage Grotesque — used for hero titles, section headings, and all H1–H6 elements.
Cormorant — used in selected sections that require a decorative or premium appearance.
DM Sans — used for paragraphs, navigation, buttons, forms, and general text content.

Font variables

Font variables are defined inside 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

You can replace the default fonts with your own Google Fonts or self-hosted fonts by updating the font variables inside assets/css/core.css.

Once updated, all KitFront sections will automatically use the new fonts.

Brand Colors

Typography