Font Rendering Issues with Avenir Next (custom import)

Expo SDK
1

Hey,

I’m having an issue with imported fonts not rendering the correct weight, despite the individual font file working correctly.

I’m going to be as descriptive as I can because I have a feeling its something silly I’m doing wrong:

  1. The font is AvenirNext. I load it in b/c I want it for both Android / iOS
  2. I have a file that requires all the font weights like so:
'AvenirNext-Bold': require('../assets/fonts/AvenirNext-Bold.ttf'),
'AvenirNext-BoldItalic': require('../assets/fonts/AvenirNext-BoldItalic.ttf'),
'AvenirNext-DemiBold': require('../assets/fonts/AvenirNext-DemiBold.ttf'),
  1. I use Expo.Font.loadAsync(FONTS) to load them:
await Promise.all([
      Expo.Font.loadAsync(FONTS),
      this._loadAssetsAsync(),
      this._checkForInitialRoute()
])
  1. I know that fontWeight, fontStyle don’t work with imported fonts so I use them as directed:
title: {
  fontFamily: 'AvenirNext-DemiBold',
  fontSize: 19
}

09 AM
09 AM1146×454 47.2 KB

While creating a mock up of this in Sketch, I noticed that DemiBold is actually loading the Bold file.

If I open the AvenirNext-DemiBold in my assets/fonts folder, its loading the correct font weight. It’s just not represented in the app.

Can it be a naming thing?
Is the font file corrupt?
Am I going crazy?

Any help would be appreciated!
Thanks!

2

hey, where is the element using the title style? might be a simple typo that you referenced a different style on the element you wanted styled with that font. also, have you tried this with other fonts, or just Avenir?

either way I’ve made a snack with a similar font as yours which you can compare and see if it works. if so we can probably reduce it down to some issue with the files

3

Hey @samee!

Thanks for helping out! Your snack made me realize that I needed to rename my fonts.

so instead of fontFamily: “AvenirNext-DemiBold”, “avenir-next-demi-bold”

1 Like
4

glad I could help! that’s strange that the name case affects correctly referencing it. I’ll send a pr to include a note in the docs

1 Like