不能在脉轮中使用 ubuntu-mono 字体-UI

Question

我正在尝试使用 ubuntu-mono 字体与 chakra-UI 反应。所以，我提到了脉轮-UI [docs][1].
但是，无法反映更改。
我的```theme.ts```和```App.tsx```在下面。

theme.ts

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
    fonts: {
        heading: "Ubuntu-mono",
        body: "Ubuntu-mono",
    },
    styles: {
        global: {
            body: {
                backgroundColor: "black",
                color: "white",
            }
        }
    }
})

export default theme;

App.tsx

import * as React from "react"
import {
    ChakraProvider, Container,
} from "@chakra-ui/react"
import {BrowserRouter} from "react-router-dom";

import theme from "./theme/theme";
import '@fontsource/ubuntu-mono/700.css';

import {Router} from "./router/Router";

export const App = () => (
        <ChakraProvider theme={theme}>
            <BrowserRouter>
                <Router/>
            </BrowserRouter>
        </ChakraProvider>
)

当然，我有运行 npm install，package.json 在 dependencies 中包含 "@fontsource/ubuntu-mono": "^4.5.6" 行。我也提到了脉轮的另一个doc-UI，但是，我找不到关于这个问题的描述。

不过，这可能是一个简单的问题，谁能给我一个解决方案。

Answer 1

我猜这与环境有关。我最初在 CodeSandbox 中尝试过，但字体没有加载，但是当我运行在本地使用 Vite 应用程序时，它工作得很好。

您在什么环境下工作？在这里查看我的回购协议：https://github.com/estheragbaje/test-fonts

不能在脉轮中使用 ubuntu-mono 字体-UI

Can not use ubuntu-mono font in chakra-UI

fonts

reactjs

chakra-ui