Font Rendering Issues with Avenir Next (custom import)


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([
  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

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!

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

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

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