How can I load multiple font variants in the theme configuration file?

[Viraj-10]

Discussed in https://github.com/gluestack/gluestack-ui/discussions/2051

^{Originally posted by lucasfsduarte April 8, 2024} Hello!

I'm currently migrating an application created with NativeBase to Gluestack and I had a small problem with fonts. I'm loading my fonts from @expo-google-fonts/montserrat as follows:

const [fontsLoaded, fontsError] = useFonts({
    Montserrat_300Light,
    Montserrat_400Regular,
    Montserrat_500Medium,
    Montserrat_600SemiBold,
    Montserrat_700Bold,
  })

The problem is that I haven't figured out how to load all of this into my ejected gluestack-ui.config.ts theme config file. Currently the fonts section looks like this:

fonts: {
      heading: 'Montserrat_400Regular',
      body: 'Montserrat_400Regular',
      mono: undefined,
    },

Am I on the right track or am I screwing up? Any help would be amazing, thanks in advance.