fonts - 通过 Theme-UI 使用本地自定义字体

Question

我想在我的网站中加载本地字体，我使用的是 theme-ui。我的主题 UI 配置如下所示：

 const theme = { 
 fonts: {
    body: 'CircularBlack',
    heading: 'CircularBlack',
    monospace: 'Menlo, monospace',
  },
...

“CircularBlack”是我的自定义字体。但我不知道如何告诉 theme-ui 使用这种字体。

Answer 1

我这样做在这种方法中，我们使用这个网站
将字体安装为包。

import '@fontsource/vazir'
import '@fontsource/fira-code'

import { Global } from '@emotion/react'

const GlobalStyles = () => (
    <Global
        styles={() => ({
            '*': {
                boxSizing: 'border-box',
            },
            body: {
                fontFamily: 'Vazir, sans-serif',
            },
        })}
    />
)

export default GlobalStyles

// _app.tsx

import type { AppProps } from 'next/app'
import { ThemeProvider } from 'theme-ui'
import { theme } from '../components/ui/theme'
import GlobalStyles from '$components/ui/GlobalStyles'

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <ThemeProvider theme={theme}>
            <Component {...pageProps} />
            <GlobalStyles />
        </ThemeProvider>
    )
}
export default MyApp