无法在查克拉UI中使用ubuntu mono字体

Question

我正在尝试使用ubuntu mono字体与chakr UI进行反应。所以，我提到了脉轮UI【docs】【1】
然而，这一变化无法反映出来
下面是我的"``主题.ts``"one_answers"``应用程序.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>
)

当然，我已经用package.json运行了npm install，其中dependencies中包含"@fontsource/ubuntu-mono": "^4.5.6"行。我也参考了另一个脉轮UI的医生，然而，我找不到关于这个问题的描述

虽然，这可能是一个容易的问题，任何人给我一个解决方案。

Answer 1

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

你在什么环境下工作？请在此处查看我的回购：https://github.com/estheragbaje/test-fonts