Use local custom fonts with Theme-UI

Question

i want to load a local font in my site, where im using theme-ui. My theme-ui config looks like this:

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

"CircularBlack" is my custom font. But I have no idea how to tell theme-ui to use this font.

Answer 1

I do it like this
In this approach, we install fonts as packages using this website.

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