CODEWITHSUNDEEP
typescriptreact-nativefonts
matteog
matteog

Reputation: 190

How can I ignore operating system font in react-native?

I want to ignore the system operating font (iOS & Android) and use the various font that I used in my react-native project. I would like to do it only once, but I don't understand how. can you help me?

Upvotes: 4

Views: 796

Answers (1)

hakki
hakki

Reputation: 6517

Add Fonts to Assets

Add all the font files you want to an “assets/fonts” folder in the root of your react native project

Package.json

Next we need to tell React Native where our custom fonts are located. We do this by adding rnpm to package.json providing the path to the font files:

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

Then we tell react native to link those font files for us:

react-native link

On IOS

This should add the font references in your Info.plist file for iOS and on Android copy the font files to android/app/src/main/assets/fonts. You can verify this by opening up Info.plist from the iOS folder and looking for a UIAppFonts key, you should see something similar to:

<key>UIAppFonts</key>
    <array>
        <string>YOUR_FONT_FILE.ttf</string>
    </array>

On Android

if you look in the file path “android/app/src/main/assets/fonts/” you should see your fonts have been copied over:

React Native Styles

With your fonts embedded and referenced it’s a simple case of adding them to your React Native styles. Simply add a fontFamily property with your font name:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  foo: {
    fontFamily: "YOUR_FONT_FAMILY_NAME",
    fontSize: 30,
    textAlign: "center",
    margin: 10
  },
  bar: {
    fontFamily: "YOUR_FONT_FAMILY_NAME",
    fontSize: 20,
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Sources:

Upvotes: 3

Related Questions