How do you support and customize custom fonts and handle height and line-height issues?

Short answer

Add the font files (TTF/OTF), link them through Expo Font or the assets directory in a bare build, use the correct fontFamily name, and set lineHeight to accommodate system text scaling.

Explanation

Font names must exactly match the name embedded in the operating system (the PostScript name on iOS and the file name on Android). Arabic fonts sometimes have different metrics that clip the tops or bottoms of letters, so set includeFontPadding: false on Android and calculate a sufficient lineHeight.

Code example

// Use the custom font safely in React Native
const styles = StyleSheet.create({
  arabicHeading: {
    fontFamily: 'Cairo-Bold',
    fontSize: 20,
    lineHeight: 30, // Required to prevent Arabic characters from being clipped
    textAlign: 'right',
  }
});

Common mistakes

• Combining fontFamily for a custom font with fontWeight: "bold", which makes the system look for a missing style and fall back to the default system font.

Follow-up questions

• How are shadows and elevation handled across iOS and Android?

Sources

• Expo docs — Fonts
• React Native docs — Text Style Props