Typography

Change fonts

You can change fonts and other text styles for headings, code and all other components with the following theme properties:

  • theme.fontFamily – controls font-family in all components except Title, Code and Kbd
  • theme.fontFamilyMonospace – controls font-family of components that require monospace font: Code, Kbd and Prism
  • theme.headings.fontFamily – controls font-family of h1-h6 tags in Title and TypographyStylesProvider components, fallbacks to theme.fontFamily if not defined

Greycliff CF or sans-serif title

Monaco, Courier Code
import { Button, Code, Title, MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
fontFamily: 'Verdana, sans-serif',
fontFamilyMonospace: 'Monaco, Courier, monospace',
headings: { fontFamily: 'Greycliff CF, sans-serif' },
}}
>
<Title order={3}>Greycliff CF or sans-serif title</Title>
<Button>Verdana button</Button>
<Code>Monaco, Courier Code</Code>
</MantineProvider>
);
}

Font sizes

theme.fontSizes property defines font-size values for all Mantine components:

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{
fontSizes: {
xs: '0.6rem',
sm: '0.75rem',
md: '0.9rem',
lg: '1rem',
xl: '1.2rem',
},
}}
>
<App />
</MantineProvider>
);
}

System fonts

By default, Mantine uses system fonts. It means that different devices will display components based on available font, for example, MacOS and iOS users will see San Francisco font, Windows users will see Segoe UI font, Android users will see Roboto font and so on. This approach provides familiar experience to the users and allows avoiding common problems related to custom fonts loading (layout shift, invisible text, etc.), if you do not have strict requirements, it is recommended to use system fonts for better performance.

Default values for theme properties:

  • Default value for theme.fontFamily and theme.headings.fontFamily is -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
  • Default value for theme.fontFamilyMonospace is ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

Headings

To customize headings in Title and TypographyStylesProvider components set theme.headings:

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
headings: {
// properties for all headings
fontWeight: 400,
fontFamily: 'Roboto',
// properties for individual headings, all of them are optional
sizes: {
h1: { fontWeight: 100, fontSize: '3rem', lineHeight: 1.4 },
h2: { fontSize: '2.2rem', lineHeight: 1.5 },
// ...up to h6
h6: { fontWeight: 900 },
},
},
}}
>
<App />
</MantineProvider>
);
}

If you need to customize styles of heading with specific element you can use Styles API on MantineProvider:

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
components: {
Title: {
styles: {
root: {
'&:is(h1)': { color: 'red' },
'&:is(h3)': { color: 'blue' },
},
},
},
TypographyStylesProvider: {
styles: {
root: {
'& h1': { color: 'red' },
'& h3': { color: 'blue' },
},
},
},
},
}}
>
<App />
</MantineProvider>
);
}

Load custom fonts

Use Global to load custom fonts. The following example shows how Mantine docs website loads Greycliff CF font:

import { Global } from '@mantine/core';
import bold from './GreycliffCF-Bold.woff2';
import heavy from './GreycliffCF-Heavy.woff2';
export function CustomFonts() {
return (
<Global
styles={[
{
'@font-face': {
fontFamily: 'Greycliff CF',
src: `url('${bold}') format("woff2")`,
fontWeight: 700,
fontStyle: 'normal',
},
},
{
'@font-face': {
fontFamily: 'Greycliff CF',
src: `url('${heavy}') format("woff2")`,
fontWeight: 900,
fontStyle: 'normal',
},
},
]}
/>
);
}

Then you will be able to use custom fonts in any component or MantineProvider:

import { MantineProvider, Button } from '@mantine/core';
// import component with custom fonts you've created before
import { CustomFonts } from './CustomFonts';
function Demo() {
return (
<MantineProvider
theme={{
// use custom font in MantineProvider
fontFamily: 'Greycliff CF, sans-serif',
}}
>
<CustomFonts />
<App />
<Button
sx={{
// or anywhere else
fontFamily: 'Greycliff CF, sans-serif',
}}
>
With custom font
</Button>
</MantineProvider>
);
}