Google Fonts in React Native

Question

I was wondering if Google fonts can be used in my React Native project.

I was looking for some information but could not find anything.

Is it possible?

Thanks.

PD: I know that I can download it and include it in my project.

Answer 1

Download Google fonts from here: Github Google Fonts

Assuming your Quicksand font, 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 the font to xCode in => Build Phases => Copy Bundle Resources

Then check if your projects have the following: 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>

It helps me.