Use custom fonts with multiple variants

Please provide the following:

  1. SDK Version: 38
  2. Platforms(Android/iOS/web/all): IOS & Android

Hi there,

I try to use some custom fonts with my app. In the app.js I load them using the font class as below:

await Font.loadAsync({
          ...Ionicons.font,
          'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
          'Nunito Sans': require('./assets/fonts/NunitoSans-Regular.ttf'),
          'Nunito Sans-Bold': require('./assets/fonts/NunitoSans-Bold.ttf'),
          'Nunito-Regular': require('./assets/fonts/Nunito-Regular.ttf'),
          'Nunito-Bold': require('./assets/fonts/Nunito-Bold.ttf')
});

When I use the font inside a component I have this style:

const textCommonStyle = {
    color: 'black',    
    fontSize: 16,
    textTransform: 'uppercase',
    textAlign: 'center',
    fontWeight: 'bold',
    fontFamily: 'Nunito Sans'
}

For some reason, this does not show the bold variance of the font. This shows the regular style. Is there any way to import a font with all its variants and use a single font family and then use italic or bold properties?

Many thanks,
Radu

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.