Can not use ubuntu-mono font in chakra-UI

Question

I'm trying to use the ubuntu-mono font in react with chakra-UI. So, I referred to the chakra-UI [docs][1].
However, the change could not be reflected.
My ```theme.ts``` and ```App.tsx``` are below.

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

Of course, I have run npm install with the package.json that includes the "@fontsource/ubuntu-mono": "^4.5.6" line in its dependencies. I also referred to another doc of the chakra-UI, however, I could not find out describes regarding this problem.

Although, this may an easy problem, anyone who gives me a solution.

Answer 1

I'm guessing this has to do with the environment. I tried it initially in CodeSandbox but the font didn't load but when I ran it locally using Vite app, it worked just fine.

What environment are you working in? See my repo here: https://github.com/estheragbaje/test-fonts