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 Kbdtheme.fontFamilyMonospace
– controls font-family of components that require monospace font: Code, Kbd and Prismtheme.headings.fontFamily
– controls font-family of h1-h6 tags in Title and TypographyStylesProvider components
Greycliff CF or sans-serif title
Monaco, Courier Code
Font sizes
theme.fontSizes
property defines font-size values for all Mantine components:
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
andtheme.headings.fontFamily
is-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
- Default value for
theme.fontFamilyMonospace
isui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
Headings
To customize headings in Title and TypographyStylesProvider components
set theme.headings
:
If you need to customize styles of heading with specific element you can use Styles API on MantineProvider:
Load custom fonts
Use Global to load custom fonts.
The following example shows how Mantine docs website loads Greycliff CF
font:
Then you will be able to use custom fonts in any component or MantineProvider: