Can't add font to fontFamily in global theme

[mzavattaro]

I've been trying to add a specific font Jura, sans-serif to the global theme theme.ts.

I followed this guide https://mantine.dev/theming/typography/ and it doesn't work with Jura, sans-serif from Google Fonts. It does correctly change the font toVerdana, sans-serif like in the example.

How do I get this to work:

'use client';

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

export const theme = createTheme({
  /* Put your mantine theme override here */
  fontFamily: 'Jura, sans-serif',
});

Also, how do I get select components to have different fonts outside of those that are set in theme.ts? There doesn't seem to be an example having the <Button /> have one font then the <Input /> adopt a different font again.

Only thing I can think of is not having Mantine theme.ts manage the fonts and do the NextJS method of font management. Is that possible?

[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!

[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"
    />

[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