# Updating the fonts of your Makerkit site

> Learn how to update the fonts of your Makerkit landing pages

*Canonical: https://makerkit.dev/docs/remix-supabase/how-to/setup/updating-fonts*

---

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

```js
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.

 ```css {% title="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**.