gluestack

gluestack Logogluestack

Issues with Font Family on iOS using Gluestack v1

joaquinboto. posted this in #support
Open in Discord
Avatar
joaquinboto.OP
I’m working on a React Native project using Gluestack v1 for styling. Everything works perfectly on Android, but I’m experiencing issues with font family on iOS.

I’ve added my custom fonts to the project and ran the following command to link the fonts:
npx react-native-asset

This command successfully handled the font linking by updating the Info.plist and all necessary configurations. The fonts display perfectly on Android, but on iOS, the fontFamily is not resolving correctly.
The issue seems to be related to the FontResolver plugin provided by Gluestack.

Fonts in Info.plist and Xcode:
I’ve added the fonts to my Info.plist file under the UIAppFonts key, and I’ve confirmed that the fonts are included in the Xcode project.

Here’s an example from my Info.plist:
<key>UIAppFonts</key>
<array>
<string>Montserrat-Bold.ttf</string>
<string>Montserrat-Medium.ttf</string>
<string>Montserrat-Regular.ttf</string>
<string>Montserrat-SemiBold.ttf</string>
</array>

Gluestack createConfig Configuration:
fonts: {
heading: 'Montserrat-Medium',
body: 'Montserrat-Regular',
mono: 'Montserrat-Bold',
semibo: 'Montserrat-SemiBold',
},
How can I properly configure the FontResolver or Gluestack to avoid this issue on iOS? Are there any specific steps I’m missing to ensure the custom fonts work correctly on both iOS and Android?

1 Reply