This documentation is for a legacy version of Remix and Supabase. For the latest version, please visit the Remix and Supabase V2 documentation

Updating the fonts of your Makerkit site

Learn how to update the fonts of your Makerkit landing pages

What fonts are used by default?

By default, Makerkit uses the system Apple font on Apple devices, the Inter font as fallback.

Removing Apple font as default

If you want to remove the Apple font as default, update the fonts in the Tailwind config file.

fontFamily: {
serif: ['serif'],
heading: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
sans: [
'system-ui',
'BlinkMacSystemFont',
'Inter',
'Segoe UI',
'Roboto',
'Ubuntu',
],
monospace: [`SF Mono`, `ui-monospace`, `Monaco`, 'Monospace'],
}

If you are importing a font from Google Fonts, update the font in the index.css file.

app/styles/index.css
@import url('//fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap&display=swap');

The above uses Inter, but you can update with the value set in the Tailwind config file.

NB: the font loaded in the CSS file must match the font name in the Tailwind config file.