Custom fonts are commonly used in React Native applications to ensure consistent typography across platforms and avoid discrepancies caused by system defaults or user-defined themes. Unlike web development, integrating custom fonts in React Native requires specific configuration steps for both Android and iOS.

Step 1: Add Font Files

Place your .ttf or .otf font files into a dedicated directory—typically assets/fonts at the project root. Ensure the filename matches the actual font name. If the font name contains spaces (e.g., My Font Bold), replace them with hyphens (My-Font-Bold) to prevent compatibility issues, especially on Android.

Step 2: Configure react-native.config.js

Create or update react-native.config.js in the project root to include the font directory:

module.exports = {
  assets: ['./assets/fonts'],
};

This tells React Native where to find your custom fonts during the linking process.

Step 3: Link Fonts Using react-native-asset

Run the following command in your project root:

npx react-native-asset

This tool automatically copies font files to the appropriate platform-specific directories:

• For Android: android/app/src/main/assets/fonts/
• For iOS: Adds references in Xcode’s Info.plist and project file

Note: Older versions of React Native (<0.69) used react-native link, but react-native-asset is the modern standard.

After running this command, restart your bundler and rebuild the app (npm run android / npm run ios) to see changes take effect.

Step 4: Apply the Font in Styles

Use the font via the fontFamily style property. The exact name depends on the platform:

• iOS: Use the font’s PostScript name (visible in Font Book on macOS).
• Android: Typically uses the original font filename without extansion.

Example:

const styles = StyleSheet.create({
  text: {
    fontFamily: 'PressStart2P-Regular',
  },
});

Handling Platform-Specific Font Names

To avoid repetitive ternary checks, centralize font definitions:

// src/constants/fonts.ts
import { Platform } from 'react-native';

const FONT_FAMILY = {
  PressStart2PRegular: Platform.select({
    ios: 'PressStart2P-Regular',
    android: 'PressStart2P-Regular',
  }),
};

export default FONT_FAMILY;

Usage:

<Text style={{ fontFamily: FONT_FAMILY.PressStart2PRegular }}>
  Custom font text
</Text>

This approach improves maintainability, reduces errors, and simplifies support for additional platforms.

Common Issues and Solutions

1. Bold/italic styles revert to system font
This usually happens when only a single font weight is included. The system tries to synthesize bold/italic but falls back if the variant isn’t available. Solution: Include all required font variants (e.g., *-Bold.ttf) and reference them explicitly.

2. Font works on iOS but not Android
Some third-party libraries (e.g., react-native-splash-screen) can interfere with asset linking. Try:

• Removing the conflicting dependency
• Re-running npx react-native-asset
• Reinstalling the dependency

3. Font name mismatch across platforms
Always verify the correct internal font name using platform-specific tools (e.g., Font Book for macOS, or inspecting the .ttf metadata).