Working with Built-in System Fonts

In this lesson, you will learn how to leverage native system fonts to ensure your application feels perfectly at home on both iOS and Android.

When building cross-platform apps, using custom fonts can sometimes lead to inconsistent rendering or increased bundle sizes. React Native provides a powerful alternative: the default system font stack. By omitting a custom fontFamily, React Native automatically maps your text to the platform’s native typeface—San Francisco on iOS and Roboto on Android.

Why use System Fonts?

Native system fonts are designed by operating system engineers for optimal readability, accessibility, and performance. They are already loaded in the device’s memory, meaning your app starts faster and scales better with system-wide text size accessibility settings.

Implementing Native Typography

To use the system font, simply don't provide a fontFamily style property. Instead, focus on defining the fontWeight and fontSize. React Native will interpret these values and select the corresponding weight variant of the native system font.

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const NativeTypography = () => (
  <>
    <Text style={styles.header}>Welcome to the App</Text>
    <Text style={styles.body}>This text uses the native system font.</Text>
  </>
);

const styles = StyleSheet.create({
  header: {
    fontSize: 24,
    fontWeight: '700', // Bold native variant
  },
  body: {
    fontSize: 16,
    fontWeight: '400', // Regular native variant
  },
});

When you set fontWeight: '700', iOS will automatically switch to the bold version of San Francisco, and Android will switch to the bold version of Roboto. This creates a "platform-native" feel without any extra configuration.

If you find that your app requires specific "look and feel" adjustments, you can rely on the system’s native font metrics. Because these fonts are deeply integrated into the OS, they handle baseline alignment and character spacing according to the platform's specific design language, ensuring your text never looks out of place or "jittery" across different device models.

Key Takeaway: By omitting fontFamily and utilizing native fontWeight values, you allow React Native to automatically swap in the OS-standard typeface, providing the most accessible and performant text rendering for your users.