singular-particular-space/skills/react-native-skills/rules/fonts-config-plugin.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Load fonts natively at build time	LOW	fonts available at launch, no async loading	fonts, expo, performance, config-plugin

Use Expo Config Plugin for Font Loading

Use the expo-font config plugin to embed fonts at build time instead of useFonts or Font.loadAsync. Embedded fonts are more efficient.

Incorrect (async font loading):

import { useFonts } from 'expo-font'
import { Text, View } from 'react-native'

function App() {
  const [fontsLoaded] = useFonts({
    'Geist-Bold': require('./assets/fonts/Geist-Bold.otf'),
  })

  if (!fontsLoaded) {
    return null
  }

  return (
    <View>
      <Text style={{ fontFamily: 'Geist-Bold' }}>Hello</Text>
    </View>
  )
}

Correct (config plugin, fonts embedded at build):

// app.json
{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": ["./assets/fonts/Geist-Bold.otf"]
        }
      ]
    ]
  }
}

import { Text, View } from 'react-native'

function App() {
  // No loading state needed—font is already available
  return (
    <View>
      <Text style={{ fontFamily: 'Geist-Bold' }}>Hello</Text>
    </View>
  )
}

After adding fonts to the config plugin, run npx expo prebuild and rebuild the native app.

Reference: Expo Font Documentation