expo-google-fonts

Use any of the 1488 fonts and variants from fonts.google.com in your Expo app

expo-google-fonts

The @expo-google-fonts packages for Expo allow you to easily use any of 1488 fonts (and their variants) from fonts.google.com in your Expo app.

These packages and all these fonts work across web, iOS, and Android and are free to use and open source.

Usage

Here is an example of using the Inter font family in a very simple project.

Install the package for the font you want

npx expo install @expo-google-fonts/inter expo-font

In your app

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import {  useFonts, Inter_900Black } from '@expo-google-fonts/inter';

export default function App() {
  let [fontsLoaded] = useFonts({
    Inter_900Black,
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Inter_900Black', fontSize: 40 }}>Inter Black</Text>
    </View>
  );
}

Note: You can also install expo-splash-screen to load fonts before your app is rendered. This will help you to keep the splash screen visible while loading the fonts and then hide the splash screen when app has rendered with some initial content. See minimal example in Fonts for more information.

Example Project

Here is a minimal but complete example.

Each individual font family package README includes a complete example of using that font family.

🔡 Available Fonts

You can browse all available Google Fonts on fonts.google.com.

directory-by-atiladev-com.netlify.app is a directory / search engine that will let you browse and search through all of the available fonts and show you the appropriate import statements you'll need so you can copy & paste into your own code.

Here are a few examples of the 5504 variants of 1488 fonts available:

There is also a gallery in this repo showing every font family and variant available.