DEV Community

Benschodie
Benschodie

Posted on

Load Google Fonts in React Native with expo google fonts

Google Fonts in React Native

check the documentation here -> https://github.com/expo/google-fonts

Start: type this into your terminal to install the expo font package

expo install expo-font
Enter fullscreen mode Exit fullscreen mode

then type this command

expo install @expo-google-fonts/your-font
Enter fullscreen mode Exit fullscreen mode

replace your-font with the font you want to install, like in the example below:

expo install @expo-google-fonts/lato
Enter fullscreen mode Exit fullscreen mode

then add in your (for example) app.js the following code. Also check the Comments in the Code :)

// import oswald font
import {
  useFonts as useOswald,
  Oswald_400Regular,
} from "@expo-google-fonts/oswald";
// import lato font
import { useFonts as useLato, Lato_400Regular } from "@expo-google-fonts/lato";


export default function App() {
// useFont Hook
  const [oswaldLoaded] = useOswald({
// load any font variation in here
    Oswald_400Regular,
  });
  const [latoLoaded] = useLato({
    Lato_400Regular,
  });
// check if they are there
  if (!oswaldLoaded || !latoLoaded) {
    return null;
  }
Enter fullscreen mode Exit fullscreen mode

if you have any questions, feel free to ask 🙌🏻

Top comments (1)

Collapse
 
kudema profile image
Kudema

how can we use the same font on the entire app without importing it each time on every component ?