DEV Community

Benschodie
Benschodie

Posted on

6 3

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 🙌🏻

Sentry mobile image

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide

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 ?

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay