Can't add font to fontFamily in global theme

[mantinedev]

Can't add font to fontFamily in global theme

[rtivital]

You did not include font files

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jura&display=swap"
      rel="stylesheet"
    />

[rtivital]

https://codesandbox.io/s/beautiful-galois-tsy75q?file=/src/App.tsx

[mzavattaro]

Why doesn't it work in theme.ts? Like for example in computed it does show Jura, sans-serif as the font but it doesn't display the changes.

Edit: can confirm that solution doesn't work in the NextJS template. Something is preventing the changes to render in browser.

Happy to have this flagged as a 🐛 @rtivital, thanks for trying!

[mzavattaro]

That looks to have solved it. Is it possible to get this included in the https://mantine.dev/theming/typography/ section of the docs? I'm happy to contribute to the docs for it.

Edit: my only gripe with this method is that it ignores Next's font optimisation so it's not an optimal solution more of a work around. Nonetheless, thanks for the quick response!

[prvnbist]

An alternative way as opposed to loading font scripts would be to use next/font.

import { Jura} from 'next/font/google'

const jura = Inter({ subsets: ['latin'] })

export const theme = createTheme({
   fontFamily: jura.style.fontFamily
})

[rtivital]

https://help.mantine.dev/q/next-load-fonts