CODEWITHSUNDEEP
reactjschakra-ui
ekoret
ekoret

Reputation: 86

ChakraUI custom fonts not overwriting default fonts

I followed the guide ChakraUI provides for setting up self hosted fonts here. I followed every single step yet when I create Text and Heading components the font that shows is the default font setting from ChakraUI. I know the custom theme file is working correctly because I can use the custom colours I set (brand.tm). I also know for sure that the font packages are imported because on a ChakraUI Heading or Text component, if I explicitly set the fontFamily prop to "Open Sans", "Raleway", or "Roboto", they work. If I also keep the prop there and comment out the font package import, it stops working, so I can confirm that the font package is importing.

Steps I've taken:

Some details:

I've seen some examples where people would just wrap their application with a "font wrapper" to apply it but is there a way to do it with the ChakraProvider and custom theme config?

theme.ts

import '@fontsource/roboto';
import '@fontsource/raleway/400.css';
import '@fontsource/open-sans/700.css';
import { ThemeConfig, extendTheme } from '@chakra-ui/react';

const config: ThemeConfig = {
    initialColorMode: 'dark',
    useSystemColorMode: true,
};

const fonts = {
    heading: `'Open Sans', sans-serif`,
    body: `Raleway, sans-serif`,
};

const colors = {
    brand: {
        tm: 'tomato',
        tl: 'teal',
    },
};

const theme = extendTheme({
    config,
    fonts,
    colors,
});

export default theme;

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import theme from './theme';
import App from './App.tsx';
import { ToastContainer } from './utils/toastHandler.ts';
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <BrowserRouter>
                <App />
                <ColorModeScript initialColorMode={theme.config.initialColorMode} />
                <ToastContainer />
            </BrowserRouter>
        </ChakraProvider>
    </React.StrictMode>
);


Dependencies

  "dependencies": {
    "@chakra-ui/react": "^2.7.0",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@fontsource/open-sans": "^5.0.2",
    "@fontsource/raleway": "^5.0.2",
    "@fontsource/roboto": "^5.0.2",
    "framer-motion": "^10.12.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.9.0",
    "react-router-dom": "^6.11.2"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }

Upvotes: 2

Views: 542

Answers (1)

seanbookerjr
seanbookerjr

Reputation: 1

Put these in main.tsx

import '@fontsource/roboto';
import '@fontsource/raleway/400.css';
import '@fontsource/open-sans/700.css';

Upvotes: 0

Related Questions