Tabular Figures in Mobile App

Glyphs
1

Hello!

I was commissioned to design tabular numbers for a typeface which I decided to include as a “tnum” feature.

The tabular numbers are working fine in Adobe’s programs and on the Web.

But the developers have noticed that they are unable to get them to work on a mobile app.
They are using React Native and are trying to enable them using the fontVariant property ‘tabular-nums’

So after testing a lot of font files, I have found only one that seems to be working in this environment – SF Pro.

I was unable to find anything special in the font feature info, but have noticed that after exporting the same font file from the Glyphs App, this font’s tabular numbers stop working as well.

What do you think am I missing?

2

I haven’t used React Native in a few years and can only imagine a lot has changed in that time, so take this with a grain of salt:

It wasn’t too long ago that fontVariant was an iOS-only setting in React Native, and I remember the <Text> component having other quirks. I would check two things:

  • Try explicitly setting the fontWeight property to normal or 400 (or whatever the weight is) if it is not already set, along with the fontVariant setting (this may be fixed / unnecessary now but used to be a quirk for sure)
  • Make sure fontVariant is being passed as an array rather than a string – <Text style={{ fontVariant: ['tabular-nums'], fontWeight: 'normal' }}> rather than <Text style={{ fontVariant: 'tabular-nums', fontWeight: 'normal' }}>

What you’re describing sounds like a potentially different problem though…you might wait to see what one of the Glyphs developers has to say, or someone who has used React Native more recently than me :slight_smile: