字体没有在反应/下一个应用程序上正常显示

Question

我无法显示一些字体，因为一旦将它们导入到我的 React 应用程序中，它们就应该显示。

我正在使用 Next.js 和 Chakra UI。

主题文件夹：

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'`,
    },

应用程序：

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

它应该是什么样子的屏幕截图：

我的截图：

我错过了一些非常简单的东西还是这个字体不起作用？

Answer 1

您能否提供您的根应用程序和组件的代码？

您完成这一步了吗，来自：https://chakra-ui.com/community/recipes/using-fonts？

1. npm install @fontsource/notable @fontsource/inter

2. 将字体导入主题（您已经在上面完成了）
3. 然后将相关字体粗细和样式导入您创建的主题文件或您导入 ChakraProvider 的同一根文件。

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