1---
2title: Load fonts natively at build time
3impact: LOW
4impactDescription: fonts available at launch, no async loading
5tags: fonts, expo, performance, config-plugin
6---
7 
8## Use Expo Config Plugin for Font Loading
9 
10Use the `expo-font` config plugin to embed fonts at build time instead of
11`useFonts` or `Font.loadAsync`. Embedded fonts are more efficient.
12 
13**Incorrect (async font loading):**
14 
15```tsx
16import { useFonts } from 'expo-font'
17import { Text, View } from 'react-native'
18 
19function App() {
20  const [fontsLoaded] = useFonts({
21    'Geist-Bold': require('./assets/fonts/Geist-Bold.otf'),
22  })
23 
24  if (!fontsLoaded) {
25    return null
26  }
27 
28  return (
29    <View>
30      <Text style={{ fontFamily: 'Geist-Bold' }}>Hello</Text>
31    </View>
32  )
33}
34```
35 
36**Correct (config plugin, fonts embedded at build):**
37 
38```json
39// app.json
40{
41  "expo": {
42    "plugins": [
43      [
44        "expo-font",
45        {
46          "fonts": ["./assets/fonts/Geist-Bold.otf"]
47        }
48      ]
49    ]
50  }
51}
52```
53 
54```tsx
55import { Text, View } from 'react-native'
56 
57function App() {
58  // No loading state needed—font is already available
59  return (
60    <View>
61      <Text style={{ fontFamily: 'Geist-Bold' }}>Hello</Text>
62    </View>
63  )
64}
65```
66 
67After adding fonts to the config plugin, run `npx expo prebuild` and rebuild the
68native app.
69 
70Reference:
71[Expo Font Documentation](https://docs.expo.dev/versions/latest/sdk/font/)
72