how to change font family of the theme

[markaguilar]

how to change font family of the theme

[tianenpang]

Hi @markaguilar you can customize the fonts by globalStyles and createTheme.

• Specify the @font-face in globalStyles.
• Overwrite or add fonts token in createTheme.
• Next.js preload self-hosted font in pages/_document.tsx or use @next/font.

Here's an example with Next.js: codesandbox.io/s/nextui-discussion-908-custom-fonts-6y5yhk

[armatrix]

so, how to override all variants' font family? or I want to make 'h1', 'h2', 'h3' use one font family, and using another font for others, what should I do? Is there any method like override 'Text:{h1:{fontFamily:"some font"}}'?

[tianenpang]

You can use the tag selector to override the styles in globalCss.

Example with next/font - codesandbox.io/p/sandbox/nextui-discussion-908-custom-fonts-2-ub3814