reactjsnext.jsfontsgoogle-fonts

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

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:

enter image description here

Screenshot of how it looks for me:

enter image description here

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

Solution

  • 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>
    )