How to apply google fonts to entire Expo/RN app?

Question

I am trying to use Google Fonts with my entire expo project, but i dont want to import it to each and every component. How can I just import it once, and call it everywhere? Or better yet, can I set my imported font as a default font?

app.js

import { Provider } from 'react-redux'
import store from './redux/store'

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { useFonts, Montserrat_400Regular,} from '@expo-google-fonts/montserrat';
import { HomeScreen } from './components/HomeScreen';
import { AddItemScreen } from './components/AddItemScreen';
import { DetailedDayView } from './components/DetailedDayView';

export default function App(navigation) {
  const Stack = createNativeStackNavigator()

  let [fontsLoaded] = useFonts({
    Montserrat_400Regular,
  });

  if (!fontsLoaded) {
    return null;
  }


  return (
    <Provider store={store}>
      {/* <SafeAreaProvider> */}

      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
          />
          <Stack.Screen
            name="AddItemScreen"
            component={AddItemScreen}
          />
          <Stack.Screen
            name="DetailedDayView"
            component={DetailedDayView}
          />
        </Stack.Navigator>

      </NavigationContainer>
      {/* </SafeAreaProvider> */}
    </Provider>
  );
}

Answer 1

For React Native CLI:

1. First of all, download any fonts in .ttf format.
2. Create a directory and name it assets, inside the assets directory create another directory name it fonts, and then move the .ttf file here. Your path will look like this: - root/assets/fonts/your-font.ttf
3. Now, in your root directory create a file named, react-native.config.js. Inside that file paste the following code:

module.exports = {
    assets: ['./src/assets/fonts'],
}

4. Run this command npx react-native-asset. (For the older version of React Native try this command npx react-native link)

There you go. You're done. Now, check this directory root/android/app/src/main/assets/fonts to check if the font is added or not.

Now you can use your font anywhere in the app. Like this: -

fontFamily: 'your-font'

Note: You can add multiple font-family. For adding another font-family repeat 1, 2, and 4.

---

For Expo:

For Expo follow this answer: How to apply custom fonts to whole project, Expo React Native