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 '@asuikit/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 '@asuikit/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>
  );
}

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 '@asuikit/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 '@asuikit/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 '@asuikit/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 '@asuikit/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>
  );
}