Can't change default fonts in Chakra UI

user_14966666 0
Viewed 8599

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 component doesn't seem to change

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

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
  1. 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>
user_146070360

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!

user_24536470

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'
user_65690710
Related