不能在chakra-UI中使用ubuntu-mono字体。

Question

我正在尝试使用ubuntu字体与chakra进行交互。所以，我提到了脉轮-UI文档。

然而，这一变化无法得到反映。

我的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"行。我还提到了另一个文档的脉轮-UI，但是，我无法找到关于这个问题的描述。

虽然，这可能是一个简单的问题，任何人谁给我一个解决办法。

Answer 1

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

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