Fonts

Overview

This starter uses the expo-font config plugin to load fonts natively, providing optimal performance and ensuring fonts are available immediately when your app starts.

Current Setup

The template comes pre-configured with the Inter font family including 4 weights:

Regular (400)
Medium (500)
SemiBold (600)
Bold (700)

Inter is configured as the default sans-serif font in the Tailwind CSS theme, so all text uses Inter by default.

Using Fonts in Your App

With Tailwind CSS Classes

Since Inter is configured as the default font-sans, you can use standard Tailwind font classes:

import { Text } from 'react-native';

<Text className="font-sans font-normal">Regular Text (400)</Text>
<Text className="font-sans font-medium">Medium Text (500)</Text>
<Text className="font-sans font-semibold">SemiBold Text (600)</Text>
<Text className="font-sans font-bold">Bold Text (700)</Text>

With Style Props

You can also use the font directly with React Native style props:

<Text style={{ fontFamily: 'Inter', fontWeight: '400' }}>Regular Text</Text>
<Text style={{ fontFamily: 'Inter', fontWeight: '500' }}>Medium Text</Text>
<Text style={{ fontFamily: 'Inter', fontWeight: '600' }}>SemiBold Text</Text>
<Text style={{ fontFamily: 'Inter', fontWeight: '700' }}>Bold Text</Text>

Adding a New Font

To add a new Google Font to your app, follow these steps:

1. Install the Font Package

Install the desired font from the @expo-google-fonts collection:

pnpm add @expo-google-fonts/roboto

2. Update `app.config.ts`

Add the font to your expo-font plugin configuration with platform-specific settings:

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  plugins: [
    [
      'expo-font',
      {
        ios: {
          fonts: [
            'node_modules/@expo-google-fonts/inter/400Regular/Inter_400Regular.ttf',
            'node_modules/@expo-google-fonts/inter/500Medium/Inter_500Medium.ttf',
            'node_modules/@expo-google-fonts/inter/600SemiBold/Inter_600SemiBold.ttf',
            'node_modules/@expo-google-fonts/inter/700Bold/Inter_700Bold.ttf',
            // Add your new font
            'node_modules/@expo-google-fonts/roboto/400Regular/Roboto_400Regular.ttf',
            'node_modules/@expo-google-fonts/roboto/700Bold/Roboto_700Bold.ttf',
          ],
        },
        android: {
          fonts: [
            {
              fontFamily: 'Inter',
              fontDefinitions: [
                {
                  path: 'node_modules/@expo-google-fonts/inter/400Regular/Inter_400Regular.ttf',
                  weight: 400,
                },
                {
                  path: 'node_modules/@expo-google-fonts/inter/500Medium/Inter_500Medium.ttf',
                  weight: 500,
                },
                {
                  path: 'node_modules/@expo-google-fonts/inter/600SemiBold/Inter_600SemiBold.ttf',
                  weight: 600,
                },
                {
                  path: 'node_modules/@expo-google-fonts/inter/700Bold/Inter_700Bold.ttf',
                  weight: 700,
                },
              ],
            },
            // Add your new font family
            {
              fontFamily: 'Roboto',
              fontDefinitions: [
                {
                  path: 'node_modules/@expo-google-fonts/roboto/400Regular/Roboto_400Regular.ttf',
                  weight: 400,
                },
                {
                  path: 'node_modules/@expo-google-fonts/roboto/700Bold/Roboto_700Bold.ttf',
                  weight: 700,
                },
              ],
            },
          ],
        },
      },
    ],
  ],
});

3. Update Tailwind Theme (Optional)

If you want to use the font with Tailwind CSS, add it to your theme in src/global.css:

@theme {
  /* Font families */
  --font-family-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-family-roboto: 'Roboto', ui-sans-serif, system-ui, sans-serif;

  /* ... other theme config */
}

4. Run Prebuild

After updating the configuration, run prebuild to apply the changes:

pnpm run prebuild

Then rebuild your app:

pnpm run ios  # or pnpm run android

Using Local Font Files

If you prefer to use local font files instead of npm packages:

1. Add Font Files

Place your font files in the assets/fonts directory:

assets/fonts/
  ├── CustomFont-Regular.ttf
  └── CustomFont-Bold.ttf

2. Update `app.config.ts`

Reference the local font files in your configuration:

plugins: [
  [
    'expo-font',
    {
      ios: {
        fonts: [
          './assets/fonts/CustomFont-Regular.ttf',
          './assets/fonts/CustomFont-Bold.ttf',
        ],
      },
      android: {
        fonts: [
          {
            fontFamily: 'CustomFont',
            fontDefinitions: [
              {
                path: './assets/fonts/CustomFont-Regular.ttf',
                weight: 400,
              },
              {
                path: './assets/fonts/CustomFont-Bold.ttf',
                weight: 700,
              },
            ],
          },
        ],
      },
    },
  ],
],

3. Run Prebuild

pnpm run prebuild

Important Notes

iOS: Font family names are automatically extracted from the font files
Android: You explicitly define the fontFamily name and weight mappings
Using this approach, you can use fontFamily: 'FontName' with fontWeight consistently across both platforms

Fonts

Overview

Current Setup

Using Fonts in Your App

With Tailwind CSS Classes

With Style Props

Adding a New Font

1. Install the Font Package

2. Update app.config.ts

3. Update Tailwind Theme (Optional)

4. Run Prebuild

Using Local Font Files

1. Add Font Files

2. Update app.config.ts

3. Run Prebuild

Important Notes

Resources

2. Update `app.config.ts`

2. Update `app.config.ts`