Google fonts in React Native

Question

I was wondering if it'd be possible to use Google fonts in my React Native project.

I've been looking for some information but I didn't find anything.

Is it possible?

Thanks.

P.D.: I know I can download it and include it into my project.

Answer 1

If your React Native project was bootstrapped with the Expo CLI, you can now incorporate Google Fonts into the project using the expo-google-fonts package.

Install the packages:

expo install @expo-google-fonts/dev expo-font

Note: dev will allow you to import any font style from any of the Expo Google Fonts packages. This will load fonts over the network at runtime instead of adding the asset as a file to the project (good if you don't know what font to use):

import {
  useFonts,
  Roboto_400Regular,
  Bangers_400Regular,
  OpenSans_400Regular
} from "@expo-google-fonts/dev";

If on the other hand you already know what font you're going to use, run:

expo install @expo-google-fonts/FONT_FAMILY_NAME expo-font

For example, if you choose to use Roboto we would install:

expo install @expo-google-fonts/roboto expo-font

To avoid rendering text before the font is loaded, install the expo-app-loading package to use the <AppLoading /> component:

expo install expo-app-loading

Then in your project file use the font like this:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { AppLoading } from "expo-app-loading";
import {
  useFonts,
  Roboto_400Regular,
  Roboto_400Regular_Italic
} from "@expo-google-fonts/roboto";

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

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text style={{ fontFamily: "Roboto_400Regular", fontSize: 28 }}>
          Nice! Support for Google Fonts!
        </Text>
      </View>
    );
  }
}

Answer 2

Download google fonts from here : Github Google Fonts

Suppose your font is Quicksand, you can do something like this in index.ios.js :

import _ from 'lodash';

var OldText = Text;

class NewText extends OldText {
  defaultProps = {
    customFont: false
  }

  render() {
    var props = _.clone(this.props);

    if (this.props.customFont) {
      return super.render();
    }

    if (_.isArray(this.props.style)){
      props.style.push({fontFamily: 'Quicksand-Regular', fontSize: 12});
    } else if (props.style) {
      props.style = [props.style, {fontFamily: 'Quicksand-Regular', fontSize: 12}];
    } else {
      props.style = {fontFamily: 'Quicksand-Regular', fontSize: 12};
    }

    this.props = props;

    return super.render();
  }
}

Object.defineProperty(React, 'Text', {value: NewText});

Then add you font in xCode in => Build Phases => Copy Bundle Resources

Then check you have the following in your projects Info.plist :

<key>UIAppFonts</key>
<array>
    <string>Quicksand-Bold.otf</string>
    <string>Quicksand-BoldItalic.otf</string>
    <string>Quicksand-Italic.otf</string>
    <string>Quicksand-Light.otf</string>
    <string>Quicksand-LightItalic.otf</string>
    <string>Quicksand-Regular.otf</string>
    <string>Quicksand_Dash.otf</string>
</array>

This did the trick for me.

Answer 3

// expo will figure out which version of expo-font will work with the current version of expo that installed
expo install expo-font

get the custom font that you want to install expo google fonts

 expo install @expo-google-fonts/oswald
 expo install @expo-google-fonts/delius-unicase

You might have been using multiple fonts

import AppLoading from "expo-app-loading";
import {
  useFonts as useOswald,
  Oswald_400Regular,
} from "@expo-google-fonts/oswald";

import {
    useFonts as useDelius,
    DeliusUnicase_400Regular,
    DeliusUnicase_700Bold
} from "@expo-google-fonts/delius-unicase";

const [oswaldLoaded] = useOswald({
    Oswald_400Regular,
  });

const [deliusLoaded] = useDelius({
    DeliusUnicase_400Regular,,
  });



if (!oswaldLoaded || !deliusLoaded) {
    return AppLoading;
  }