Skip to content

Latest commit

 

History

History
148 lines (102 loc) · 8.12 KB

README.md

File metadata and controls

148 lines (102 loc) · 8.12 KB
Raw

Expo Google Fonts

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

expo-google-fonts npm version License: MIT

Twitter: expo Medium: exposition

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:
Inter Manrope Allan
Roboto Lusitana Nunito
Bangers SourceSansPro RobotoCondensed
PlayfairDisplay Ubuntu Oswald
BalsamiqSans Jost Lato

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

👩‍💻 @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.

🤝 Contributing

Contributions are very welcome! Note that everything under font-packages and also this README are generated. So, please make any changes you want to make to the generator instead of the packages themselves.

Authors

🔗 Links