1

I created a new next.js project and added the library of CSS nextui and it seems that I can change the font family on the documentation, but there is no example for this, and Idk what to do and how.

I searched on other platforms and websites and couldn't find anything.

Has anybody had this problem before?

brc-dd
  • 10,788
  • 3
  • 47
  • 67
Kevin
  • 11
  • 3
  • You can extend and customise the base theme, including fonts, as described in https://nextui.org/docs/theme/customize-theme#customizing-theme-tokens and https://nextui.org/docs/theme/default-theme#typography. – juliomalves Sep 11 '22 at 15:22

1 Answers1

0

not sure if it's the right way to do it but it worked for me. Go to your pages/_app.js and add this right under your imports :

import { createTheme } from '@nextui-org/react'

const theme = createTheme({
    type: 'dark',
    theme: {
        fonts: {
            sans: 'Comic Sans MS',
            mono: 'Andale Mono',
            serif: 'Gilda Display ',
        },
    },
})

Then create a styled div around the component you want to apply the font to :

import { styled } from '@nextui-org/react'

const StyledApp = styled('div', {
    fontFamily: 'serif',
})

Hope that helps !

Robin Fournier
  • 1