Font's not showing as they should on react/next app

Question

I cannot get some fonts to show as they should be shown once importing them into my React app.

I am using Next.js and Chakra UI.

Theme folder:

import { extendTheme } from "@chakra-ui/react";
import '@fontsource/notable';
import '@fontsource/inter';

export const theme = extendTheme({
    fonts: {
      heading: `'Notable, sans-serif'`,
      body: `'Inter, sans-serif'`,
    },

App:

<Heading fontSize={'10rem'}>Heading</Heading>

Screenshot of how it should look:

Screenshot of how it looks for me:

Am I missing something really simple or does this font just not work?

Answer 1

Could you provide the code for your root App and your component?

Have you done this step, from: https://chakra-ui.com/community/recipes/using-fonts?

1. npm install @fontsource/notable @fontsource/inter
2. Import the fonts into a theme (you already did it above)
3. Then import the relevant font weights and styles into the theme file you created OR the same root file you import ChakraProvider into.

    import '@fontsource/notable/400.css' <---- this one
    import '@fontsource/inter/700.css'   <---- this one
    
    import {
      ChakraProvider,
      Heading,
    } from '@chakra-ui/react'
    import theme from './theme'
    
    const App = () => (
      <ChakraProvider theme={theme}>
        ...
        <Heading>The spectacle before us was indeed sublime.</Heading>
      </ChakraProvider>
    )