loading...
Expo

Expo Google Fonts is released!

ccheever profile image Charlie Cheever ・4 min read

I wanted to use Google Fonts more easily in my Expo projects and so for the last week or two, I've been working on a library that has support for every font available on Google Fonts, and I'm excited to announce its release today!

Expo Google Fonts

The @expo-google-fonts packages for Expo allow you to easily use
any of 991 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

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 { AppLoading } from 'expo';
import {
  useFonts,
  Inter_900Black,
} from '@expo-google-fonts/inter';

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

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

        <Text style={{ fontFamily: 'Inter_900Black' }}>
          Inter Black
        </Text>

      </View>
    );
  }
};

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. You can get the Expo Google Fonts package npm package name from the font family name on Google Fonts. Just make everything lowercase and turn spaces into dashes, like you normally would with an npm package name. So, Source San Pro would turn into @expo-google-fonts/source-sans-pro

My friend Leandro Favre made a directory / search engine where you can browse and search through the complete list of fonts and it will give you the appropriate import statements.

Here are a few examples of the 3020 variants of 991 fonts available:

Inter Manrope Allan
Roboto Lusitana Nunito
Bangers SourceSansPro RobotoCondensed
PlayfairDisplay Ubuntu Oswald
BalsamiqSans Jost Lato

πŸ‘©β€πŸ’» @expo-google-fonts/dev

If you are trying out lots of different fonts, you can try using the @expo-google-fonts/dev package.

You can import any font style from any Expo Google Fonts package from it. It will load the fonts
over the network at runtime instead of adding the asset as a file to your project, so it may take longer
for your app to get to interactivity at startup, but it is extremely convenient
for playing around with any style that you want.

πŸ“– Licensing

The Expo Google Fonts project and its code are licensed under the MIT License.

All the fonts in the Google Fonts catalog are free and open source.

Individual fonts have their own licenses. Many are licensed using the
Open Font License.
For example, Nunito uses the OFL.
Check the Google Fonts pages of the font families you are using and add those licenses to
your project's licenses list when you publish.

Q: Can I use these fonts commercially: to make a logo, in my app, on my website, etc.?

A: You can use these fonts freely in your products & projects - print or digital, commercial or otherwise. However, you can't sell the fonts on their own. This isn't legal advice, please consider consulting a lawyer and see the full license for all details.

Code

The source code for the project is at:

https://github.com/expo/google-fonts#readme

Contributions welcome!

announcement

Posted on by:

ccheever profile

Charlie Cheever

@ccheever

I work on Expo--the way to make universal apps that run on web, iOS, and Android from a single React codebase.

Expo

Make universal native and web apps with JavaScript using React!

Discussion

pic
Editor guide
 

Yay! + extra shoutout to Leandro!

 

Thanks for the mention Charlie! It is impressive the work you have done to obtain a very powerful and very simple to use product. Congratulations my friend!

 

Awesome work Charlie!!

 

Does this work for all RN projects or only Expo?

 

If you add expo-font and react-native-unimodules to your RN project, you should be able to use these with any React Native project, I believe.