import { DEFAULT_THEME, px } from '@mantine/core'; import { ThemingDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.TypographyTheming);

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 CodeHighlight
• theme.headings.fontFamily – controls font-family of h1-h6 tags in Title and Typography components; falls back to theme.fontFamily if not defined

System fonts

By default, Mantine uses system fonts. This means that different devices will display components based on the available font. For example, macOS and iOS users will see the San Francisco font, Windows users will see the Segoe UI font, Android users will see the Roboto font, and so on. This approach provides a familiar experience to 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

Font sizes

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

import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  fontSizes: {
    xs: 10,
    sm: 11,
    md: 14,
    lg: 16,
    xl: 20,
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
    </MantineProvider>
  );
}

Default theme.fontSizes values:

<DataTable head={['Key', 'Value', 'Value in px']} data={Object.keys(DEFAULT_THEME.fontSizes).map((size) => [ size, ${DEFAULT_THEME.fontSizes[size]}, ${px(DEFAULT_THEME.fontSizes[size])}px, ])} />

Line heights

The theme.lineHeights property defines line-height values for the Text component; most other components use theme.lineHeights.md by default:

import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  lineHeights: {
    xs: '1.4',
    sm: '1.45',
    md: '1.55',
    lg: '1.6',
    xl: '1.65',
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
    </MantineProvider>
  );
}

Default theme.lineHeights values:

<DataTable head={['Key', 'Value']} data={Object.keys(DEFAULT_THEME.lineHeights).map((size) => [ size, ${DEFAULT_THEME.lineHeights[size]}, ])} />

h1-h6 styles

To customize headings styles in Title and Typography components, set theme.headings:

import { createTheme, MantineProvider, rem } from '@mantine/core';

const theme = createTheme({
  headings: {
    // properties for all headings
    fontWeight: '400',
    fontFamily: 'Roboto',

    // properties for individual headings, all of them are optional
    sizes: {
      h1: {
        fontWeight: '100',
        fontSize: 36,
        lineHeight: '1.4',
      },
      h2: { fontSize: 30, lineHeight: '1.5' },
      // ...up to h6
      h6: { fontWeight: '900' },
    },
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
    </MantineProvider>
  );
}

With theme.headings you can customize font-size, font-weight, and line-height per heading level. If you need more control over styles, use the :is selector with the Styles API to target a specific heading level: