ChakraUI defaulting to fallback fonts

Question

I am running this inside of a NextJS application. The way I understand it is that for the ChakraUI library, you use {extendTheme} to add your own styling configuration, and when you you define your font-families, you also include a fallback font (as required according to the documentation, 'Please do not forget to add font-family fallbacks like e.g. sans-serif on both options.') . (e.g. heading: { "first choice", "fallback choice" }) This is what my theme configuration looks like:

const theme = extendTheme({
  fonts: {
    heading: `"Droid Serif", sans-serif`,
    body: `"Open Sans", sans-serif`,
  },
  textStyles: {
    navbar: {
      fontFamily: 'heading',
      textTransform: 'uppercase'
      

    }
  },
  config,
  styles: {
    global: {
      body: {
        bg: 'gray.100',
      }
    }
  }
})

Unfortunately it will automatically default to 'sans-serif', even though if I remove that fall-back font from the theme and just leave 'droid serif', the custom fonts work perfectly fine. How I set the font in my components:

            <Text
              textAlign={useBreakpointValue({ base: 'center', md: 'right' })}
              fontFamily={'heading'}
              fontSize='2rem'
              color={'gray.800'}>
                
              Sample Title
            </Text>

Any pointers would be greatly appreciated.