Font family Roboto light and bold in react native

Question

I',m making some changes to the text in my react native application: I need to specify Roboto light for paragraphs and Roboto Bold for titles. I need to have the same look of the text in both iOS and Android apps: so I need to make it work for both I tried this code line of code

text    : {
       fontFamily: 'sans-serif-light'
   }, 

but I get this error:

I tried this type from the official documentation and it's working fine

title   : {
       fontFamily: 'Cochin'
   },

--> So I think the problem is in the Roboto font family itself. Any help?

Malorie

Answer 1

To add custom fonts to your app store all your ttf files in a directory. Add the following code to your package.json file.

"rnpm": { "assets": [ "./fonts" // yours fonts directory ] }

Then run react-native link To use the font use the same name on the ttf file in fontFamily.

Rede

react-native link – Depositor

rnpm has been deprecated in newer versions of react native. – Pubescent

Answer 2

sans-serif-light and Roboto are Android-only fonts. You need different fonts for iOS. This repository has a list of fonts available for iOS and Android - https://github.com/react-native-training/react-native-fonts

You can use Platform.select() to target different fonts for each OS:

title: {
  ...Platform.select({
       ios: { fontFamily: 'Arial', }, 
       android: { fontFamily: 'Roboto' }
  })
}

Hijoung

Thank you ...So, there is no way to use it on both iOS and android (because i need to look both apps to be identical) .. i've read somewhere that i can add it manually .ttf file and then add in the package.json and then run react native link hiddentao.com/archives/2017/03/10/… .. So may that be a solution ? – Malorie

Yes, if you want the same font to be used, you could add it, else keep with the default fonts – Hijoung

Answer 3

I recently had the same issue . It turns out that rnpm command is deprecated and you can add custom assets using react native cli configuration. https://github.com/react-native-community/cli/blob/master/docs/configuration.md

To add fonts in the project:

• Download the font and place it in the assets/fonts folder

Create a file in the project root directory as react-native.config.js Add the following code

module.exports={
    assets:[
        "./assets/fonts"
    ]
}

Run react-native link

Run the project : npx react-native run-ios

Note: if build failed for IOS, open xocde workspace settings and change the build system to Legacy Build System.

Glassworks

Answer 4

Setup Roboto for both Android/iOS:

Usage

As Roboto is the default font family for Android. We can add Roboto to iOS and just use RRikesh solution omiting fontFamily for Android:

import {
  Platform,
  StyleSheet,
} from 'react-native'

const stylesByPlatform = Platform.select({
  ios: { fontFamily: 'Roboto' },
  android: { },
})

export default StyleSheet.create({
  text: {
    ...stylesByPlatform,
    color: '#000000',
  },
})

Setup

For iOS we need to add Roboto fontFamily:

1. Download Roboto font from Google Fonts
2. Add it to your assets folder ./assets/fonts/Roboto

3. Add assets folder to your package.json:

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

4. Run: react-native link (it links ttf files on iOS and copy them on Android)

5. Remove Roboto files added in android/app/src/main/assets/fonts
6. Rebuild your app and 🎉.

I really don't know why this type of content is not in official docs. :(

Quoit

Thanks a lot for the detailed walk through – Tidewater

Answer 5

If it can help, I had a similar issue. Using "react-native link" did indeed referenced the fonts in "Build Phases > Copy Bundle Resource", but it didn't add anything to the Info.plist file.

Adding the fonts in Info.plist solved the issue.

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
</array>

Townswoman

Answer 6

for react-native +v0.69, npx react-native link will produce an error. If you are using this version of react-native the solution is;

1. npm i react-native-asset or yarn add react-native-asset

2. create a react-native.config.js file in the root folder of your project.

3. Add the following to the file

   module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };

4. create a assets/fonts folder at the root of your project.

5. then in the terminal, run npx react-native-asset.

That should solve your problem.

NB: As of rn-v0.69, react-native link has been discontinued and replaced with autolinking, but this feature doesn't work with adding custom fonts to your project so react-native-asset provides the same fixes as react-native link.

Dowie