Working with Chakra for the first time and trying to change the default font to Times New Roman in Chakra UI but get no effect. Did an import, assigned new theme, passed it as props to ChakraProvider but nothing happens in code

index.js

import {extendTheme, ChakraProvider} from "@chakra-ui/react"

const customTheme = {
    fonts: {
        body: 'Times New Roman, sans-serif',
        heading: 'Times New Roman, sans-serif',
        mono: 'Times New Roman, sans-serif', }


const theme = extendTheme({customTheme})

ReactDOM.render(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <App/>
        </ChakraProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

My text ponent doesn't seem to change

import {Text} from '@chakra-ui/react'
<Text> Some text </Text>

Working with Chakra for the first time and trying to change the default font to Times New Roman in Chakra UI but get no effect. Did an import, assigned new theme, passed it as props to ChakraProvider but nothing happens in code

index.js

import {extendTheme, ChakraProvider} from "@chakra-ui/react"

const customTheme = {
    fonts: {
        body: 'Times New Roman, sans-serif',
        heading: 'Times New Roman, sans-serif',
        mono: 'Times New Roman, sans-serif', }


const theme = extendTheme({customTheme})

ReactDOM.render(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <App/>
        </ChakraProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

My text ponent doesn't seem to change

import {Text} from '@chakra-ui/react'
<Text> Some text </Text>

• javascript
• reactjs
• chakra-ui

• hey! If I have answered your question, please accept it! – Benjamin Carlson Commented Dec 8, 2021 at 16:24

4 Answers 4

You can see how to do this on their docs.

1. Create a theme.js file where we will override the default theme

Inside of here add the following:

// importing the required chakra libraries
import { theme as chakraTheme } from '@chakra-ui/react'
import { extendTheme } from "@chakra-ui/react"

// declare a variable for fonts and set our fonts. I am using Inter with various backups but you can use `Times New Roman`. Note we can set different fonts for the body and heading.
const fonts = {
  ...chakraTheme.fonts,
  body: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`,
  heading: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`
}

// declare a variable for our theme and pass our overrides in the e`xtendTheme` method from chakra
const customTheme = extendTheme(overrides)

// export our theme
export default customTheme

2. Wrap our app in the theme

// import our theme
import theme from '../customTheme.js'

// wrap our application with the theme. This can be passed onto the ChakraProvider.
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

Last version:

const overrides = extendTheme({
    styles: {
        global: (props: StyleFunctionProps) => ({
            body: {
                fontFamily: '"Roboto", "Noto", sans-serif"'
            },
        }),
    },
})

const AppTheme = extendTheme(overrides)

export default AppTheme;

Use:

<ChakraProvider theme={AppTheme}>
    <Component {...pageProps} />
</ChakraProvider>

This works for me using chakra and nextjs.

create a file styles.css with

@font-face {
  font-family: "Font";
  src: url('../your/path/Font.woff');
  font-weight: normal;
  font-style: normal;
}

in your index.js

import '../path/styles/styles.css'

I can see that your extendTheme usage is wrong.

const theme = extendTheme({customTheme}) the curly brackets shouldn't be there. This essentially translates to:

const theme = {
   customTheme: { // <-- it adds the custom theme as a customTheme property
      fonts: {
         ...
      }
   }
}

Just remove the curly brackets and you're good to go!