Best React Native Font Family for Mobile App Development

Are you a business owner who wants to serve Android & iOS users with seamless experiences and has budget constraints as well? If that answers yes, your business needs hybrid mobile apps. React Native framework is the ultimate choice among app developers for cross-platform app development. Being an open-source framework, React Native have numerous libraries of native elements, including APIs, navigation, fancy vector icons, animations, and font families. Its community members are constantly adding value with the addition of more libraries. Though there can be several details around React native libraries, this blog will be confined to discussing React native font family. 

What is React Native font family? 

The core component here is the Text configured to display text on the screen to the users. This component supports styling, nesting, and touch handling. Titles and body text with similar styling are often grouped together as fonts of the same family are referred to as font family. As developers use fontFamily while writing code in React Native, the text will automatically inherit properties and font styling of the font family it belongs to. 

React Native text font family list

Though React Native default font is San Francisco for iOS and Roboto for android, there are plenty other font families that both OSs support. 

Supported React native text font family list for Android

  [code] import React, { Component } from 'react'; import { AppRegistry, ScrollView, Text, StyleSheet} from 'react-native'; styles=StyleSheet.create({ scroller: { flex: 1, } }); export default class AndroidFonts extends Component{ render (){ return( <ScrollView style={styles.scroller}> <Text style={{fontFamily: 'normal'}}> normal </Text> <Text style={{fontFamily: 'notoserif'}}> notoserif </Text> <Text style={{fontFamily: 'sans-serif'}}> sans-serif </Text> <Text style={{fontFamily: 'sans-serif-light'}}> sans-serif-light </Text> <Text style={{fontFamily: 'sans-serif-thin'}}> sans-serif-thin </Text> <Text style={{fontFamily: 'sans-serif-condensed'}}> sans-serif-condensed </Text> <Text style={{fontFamily: 'sans-serif-medium'}}> sans-serif-medium </Text> <Text style={{fontFamily: 'serif'}}> serif </Text> <Text style={{fontFamily: 'Roboto'}}> Roboto </Text> <Text style={{fontFamily: 'monospace'}}> monospace </Text> </ScrollView> ); } } AppRegistry.registerComponent('AndroidFonts', () => AndroidFonts); [/code] Also Read: Top React Tools & Libraries That Every React Native Developer Must Know

Supported React native text font family list for iOS

[code] import React, { Component } from 'react'; import { AppRegistry, ScrollView, Text, StyleSheet} from 'react-native'; styles=StyleSheet.create({ scroller: { flex: 1, } }); export default class IosFonts extends Component{ render (){ return( <ScrollView style={styles.scroller}> <Text style={{fontFamily: 'Academy Engraved LET'}}>Academy Engraved LET </Text> <Text style={{fontFamily: 'AcademyEngravedLetPlain'}}>AcademyEngravedLetPlain </Text> </ScrollView> ); } } AppRegistry.registerComponent('IosFonts', () => IosFonts); [/code]  

If you want  use other font families please refer to the below table -

How to add custom fonts in React native ?

In addition to the existing library of React native font family, you can personalize your mobile apps by installing custom font families. Sharing the step-by-step process with you here.  1. Select a font family you would like to use. Don’t forget to check the file name. For Android, the file name remains the same, but for iOS, the “PostScript name” will be added before the file name. So, you need to rename the font files; if you are using the font “SF UI Display” and its files are like the ones shown below, then for iOS, you have to use “SFUIDisplay-Bold” despite your file name “SFUIDisplayBold.otf”. 2. Next step is the addition of fonts to assets.  3. Now you have to define the assets directory, when using React Native version ≥ 0.60 create file “react-native.config.js and add below code  [code] module.exports = { project: { ios: {}, android: {}, // grouped into "project" }, assets: ["./assets/fonts/"], // stays the same }; [/code] 4. If you are still using React Native version < 0.60. You need to mention the location of custom fonts in React native. Adding the below lines in package.json can make it happen for you. Make sure you add the right path in the source folder else it won’t be able to fetch the font files.

Also Read: Which Mobile App Development Framework Is Right For You?

5. Next thing is to link assets. Due to auto-linking, link and unlike commands are now removed from React Native 0.69. So, for the versions above 0.69 run below command in terminal  npx react-native-asset And, for versions below 0.69 use  $ npx react-native link  For iOS link command will link fonts in Info.plst and for Android creates directory (android/app/src/main/assets/fonts).  6. Now, you can use this newly added “fontFamily” anywhere in the app using React native styles [code] const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center" }, welcome: { fontSize: 20, textAlign: "center", margin: 10, fontFamily: "SFUIDisplay-Bold" }, instructions: { textAlign: "center", color: "#333333", marginBottom: 5, fontFamily: "SFUIDisplay-Semibold" } }); [/code]

React Native Paper Fonts

I’m sure you’ve heard of React Native paper, if not, let me tell you that it’s renowned design library for React native components. Like React Native, it is open-source and available for free. Mobile app developers often use its high-quality design elements to bring a native feel to the app. It's led by callstack and has official Facebook partners as contributors. Also Read: React Native Tutorials — Learn to Build Native Mobile Apps with React React Native Paper gives you access to compact code to code for UI/UX design of your mobile app. Hence, saves you a lot of time writing long and complex code for several use cases from scratch.  Learn to install custom fonts using .ttf files, configure fonts in ThemeProvider and addition of font variants to the material design from React Native GitHub library here. 

Wrapping Up 

To get a cross-platform mobile app for your business, React Native app development services can help you at their best. WeDoWebApps is a React Native app development company with strong expertise in designing desirable mobile applications. To initiate your React Native project, share your requirements here. also, read more about React Native Upgrade Helper: Streamline Your App Upgrades with Ease and Which Mobile App Development Framework Is Right For You?