Mastering Typography in React Native: Font Weights and Custom Fonts

Mastering typography is key to creating visually appealing and user-friendly React Native applications. This guide explores how to effectively manage font weights and incorporate custom fonts into your projects.

Table of Contents

• Font Weight Styling
• Incorporating Custom Fonts

Font Weight Styling

React Native offers straightforward control over font weight using the fontWeight style property within the Text component. This property accepts numeric values (100-900) and predefined keywords:

• 'normal': Equivalent to 400.
• 'bold': Equivalent to 700.
• '100', '200', '300', '400', '500', '600', '700', '800', '900': Specific weight values.

Here’s an example demonstrating different font weights:

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

const MyComponent = () => {
  return (
    <Text style={styles.text}>
      This is normal weight (400). <Text style={styles.boldText}>This is bold (700). <Text style={styles.lightText}>This is light (300).
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
  boldText: {
    fontWeight: 'bold',
  },
  lightText: {
    fontWeight: '300',
  },
});

export default MyComponent;

Remember that font weight rendering depends on the chosen font family. Not all fonts support the full range of weights. React Native will fallback to the nearest available weight if a specific weight isn’t supported.

Incorporating Custom Fonts

Extending your design possibilities beyond default system fonts involves adding and using custom fonts. This enhances the visual appeal and branding of your app.

1. Add Font Files: Place your font files (e.g., .ttf, .otf) in a dedicated folder within your project’s assets (e.g., src/assets/fonts).
2. Register Fonts (Expo): If using Expo, leverage expo-font:

import { useFonts } from 'expo-font';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf';

export default function App() {
  const [loaded] = useFonts({
    'MyCustomFont': require('./assets/fonts/MyCustomFont.ttf'),
  });

  if (!loaded) return null;

  return (
    <Text style={{ fontFamily: 'MyCustomFont', fontWeight: 'bold' }}>Custom Font Text</Text>
  );
}

3. Register Fonts (Non-Expo): For non-Expo projects, you might need a more manual approach (This example uses a placeholder for platform-specific handling. Adjust accordingly to your needs.):

import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf'; // Adjust path as needed

const App = () => {
  return (
    <Text style={styles.text}>This uses a custom font.</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    fontFamily: Platform.OS === 'ios' ? 'MyCustomFont' : 'MyCustomFont', //Handle different OS here.
  },
});

export default App;

4. Use Registered Fonts: Once registered, use the font family name in the fontFamily style property of your Text components. Ensure the name matches the font file name used during registration.

By combining font weight and custom font techniques, you achieve precise typographic control in your React Native apps, leading to improved visual consistency and a more professional user experience. Remember thorough cross-device testing to ensure consistent rendering.