Updating the fonts of your Makerkit site

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.

@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.