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.