Best React Nat­ive Font Fam­ily for Mobile App Development - React Native Development Company
skip to content

16 May, 2023 | React Native App Development

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 -

Academy Engraved LET AcademyEngravedLetPlain
Al Nile AlNile-Bold
American Typewriter AmericanTypewriter-Bold
AmericanTypewriter-Condensed AmericanTypewriter-CondensedBold
AmericanTypewriter-CondensedLight AmericanTypewriter-Light
Apple Color Emoji Apple SD Gothic Neo
AppleColorEmoji AppleSDGothicNeo-Bold
AppleSDGothicNeo-Light AppleSDGothicNeo-Medium
AppleSDGothicNeo-Regular AppleSDGothicNeo-SemiBold
AppleSDGothicNeo-Thin AppleSDGothicNeo-UltraLight
Arial Arial Hebrew
Arial Rounded MT Bold Arial-BoldItalicMT
Arial-BoldMT Arial-ItalicMT
ArialHebrew ArialHebrew-Bold
ArialHebrew-Light ArialMT
ArialRoundedMTBold Avenir
Avenir Next Avenir Next Condensed
Avenir-Black Avenir-BlackOblique
Avenir-Book Avenir-BookOblique
Avenir-Heavy Avenir-HeavyOblique
Avenir-Light Avenir-LightOblique
Avenir-Medium Avenir-MediumOblique
Avenir-Oblique Avenir-Roman
AvenirNext-Bold AvenirNext-BoldItalic
AvenirNext-DemiBold AvenirNext-DemiBoldItalic
AvenirNext-Heavy AvenirNext-HeavyItalic
AvenirNext-Italic AvenirNext-Medium
AvenirNext-MediumItalic AvenirNext-Regular
AvenirNext-UltraLight AvenirNext-UltraLightItalic
AvenirNextCondensed-Bold AvenirNextCondensed-BoldItalic
AvenirNextCondensed-DemiBold AvenirNextCondensed-DemiBoldItalic
AvenirNextCondensed-Heavy AvenirNextCondensed-HeavyItalic
AvenirNextCondensed-Italic AvenirNextCondensed-Medium
AvenirNextCondensed-MediumItalic AvenirNextCondensed-Regular
AvenirNextCondensed-UltraLight AvenirNextCondensed-UltraLightItalic
Bangla Sangam MN Baskerville
Baskerville-Bold Baskerville-BoldItalic
Baskerville-Italic Baskerville-SemiBold
Baskerville-SemiBoldItalic Bodoni 72
Bodoni 72 Oldstyle Bodoni 72 Smallcaps
Bodoni Ornaments BodoniOrnamentsITCTT
BodoniSvtyTwoITCTT-Bold BodoniSvtyTwoITCTT-Book
BodoniSvtyTwoITCTT-BookIta BodoniSvtyTwoOSITCTT-Bold
BodoniSvtyTwoOSITCTT-Book BodoniSvtyTwoSCITCTT-Book
Bradley Hand BradleyHandITCTT-Bold
Chalkboard SE ChalkboardSE-Bold
ChalkboardSE-Light ChalkboardSE-Regular
Chalkduster Chalkduster
Cochin Cochin-Bold
Cochin-BoldItalic Cochin-Italic
Copperplate Copperplate-Bold
Copperplate-Light Courier
Courier New Courier-Bold
Courier-BoldOblique Courier-Oblique
CourierNewPS-BoldItalicMT CourierNewPS-BoldMT
CourierNewPS-ItalicMT CourierNewPSMT
Damascus DamascusBold
DamascusLight DamascusMedium
DamascusSemiBold Devanagari Sangam MN
DevanagariSangamMN DevanagariSangamMN-Bold
Didot Didot-Bold
Didot-Italic DiwanMishafi
Euphemia UCAS EuphemiaUCAS-Bold
EuphemiaUCAS-Italic Farah
Futura Futura-CondensedExtraBold
Futura-CondensedMedium Futura-Medium
Futura-MediumItalic Geeza Pro
GeezaPro-Bold Georgia
Georgia-Bold Georgia-BoldItalic
Georgia-Italic Gill Sans
GillSans-Bold GillSans-BoldItalic
GillSans-Italic GillSans-Light
GillSans-LightItalic GillSans-SemiBold
GillSans-SemiBoldItalic GillSans-UltraBold
Gujarati Sangam MN GujaratiSangamMN
GujaratiSangamMN-Bold Gurmukhi MN
GurmukhiMN-Bold Heiti SC
Heiti TC Helvetica
Helvetica Neue Helvetica-Bold
Helvetica-BoldOblique Helvetica-Light
Helvetica-LightOblique Helvetica-Oblique
HelveticaNeue-Bold HelveticaNeue-BoldItalic
HelveticaNeue-CondensedBlack HelveticaNeue-CondensedBold
HelveticaNeue-Italic HelveticaNeue-Light
HelveticaNeue-LightItalic HelveticaNeue-Medium
HelveticaNeue-MediumItalic HelveticaNeue-Thin
HelveticaNeue-ThinItalic HelveticaNeue-UltraLight
HelveticaNeue-UltraLightItalic Hiragino Mincho ProN
Hiragino Sans HiraginoSans-W3
HiraginoSans-W6 HiraMinProN-W3
HiraMinProN-W6 Hoefler Text
HoeflerText-Black HoeflerText-BlackItalic
HoeflerText-Italic HoeflerText-Regular
Iowan Old Style IowanOldStyle-Bold
IowanOldStyle-BoldItalic IowanOldStyle-Italic
IowanOldStyle-Roman Kailasa
Kailasa-Bold Kannada Sangam MN
KannadaSangamMN KannadaSangamMN-Bold
Khmer Sangam MN Kohinoor Bangla
Kohinoor Devanagari Kohinoor Telugu
KohinoorBangla-Light KohinoorBangla-Regular
KohinoorBangla-Semibold KohinoorDevanagari-Light
KohinoorDevanagari-Regular KohinoorDevanagari-Semibold
KohinoorTelugu-Light KohinoorTelugu-Medium
KohinoorTelugu-Regular Lao Sangam MN
Malayalam Sangam MN MalayalamSangamMN
MalayalamSangamMN-Bold Marker Felt
MarkerFelt-Thin MarkerFelt-Wide
Menlo Menlo-Bold
Menlo-BoldItalic Menlo-Italic
Menlo-Regular Mishafi
Noteworthy Noteworthy-Bold
Noteworthy-Light Optima
Optima-Bold Optima-BoldItalic
Optima-ExtraBlack Optima-Italic
Optima-Regular Oriya Sangam MN
OriyaSangamMN OriyaSangamMN-Bold
Palatino Palatino-Bold
Palatino-BoldItalic Palatino-Italic
Palatino-Roman Papyrus
Papyrus-Condensed Party LET
PartyLetPlain PingFang HK
PingFang SC PingFang TC
PingFangHK-Light PingFangHK-Medium
PingFangHK-Regular PingFangHK-Semibold
PingFangHK-Thin PingFangHK-Ultralight
PingFangSC-Light PingFangSC-Medium
PingFangSC-Regular PingFangSC-Semibold
PingFangSC-Thin PingFangSC-Ultralight
PingFangTC-Light PingFangTC-Medium
PingFangTC-Regular PingFangTC-Semibold
PingFangTC-Thin PingFangTC-Ultralight
Savoye LET SavoyeLetPlain
Sinhala Sangam MN SinhalaSangamMN
SinhalaSangamMN-Bold Snell Roundhand
SnellRoundhand-Black SnellRoundhand-Bold
Symbol Tamil Sangam MN
TamilSangamMN-Bold Telugu Sangam MN
Thonburi Thonburi-Bold
Thonburi-Light Times New Roman
TimesNewRomanPS-BoldItalicMT TimesNewRomanPS-BoldMT
TimesNewRomanPS-ItalicMT TimesNewRomanPSMT
Trebuchet MS Trebuchet-BoldItalic
TrebuchetMS-Bold TrebuchetMS-Italic
Verdana Verdana-Bold
Verdana-BoldItalic Verdana-Italic
Zapf Dingbats ZapfDingbatsITC

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”. How to add custom fonts in React native 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?

Frequently Asked Questions

1. What does width 100 do to react native fonts?

You can try styling different fonts of React native font family per your design needs. React Native 100 width or 100vw instruct the chosen font/design element to take the maximum width and adjust per the screen size of the mobile app.

2. What does 100vh do to react native fonts?

Like react native 100 width, 100vh instructs fonts/design elements to take maximum height for fonts/design elements and adjust per the screen size. Here vh stands for viewport height.

3. Can I change react native button font family?

The button component in React native button support minimal customization. It inherits the font family of Android & iOS. However, you can perform basic styling like font colour, font size, change display text, update alignment etc.

4. What is the standard react native font family?

React Natives uses the default font family per the platforms. It’s “Roboto” for Android and “San Francisco” for iOS.

5. Can I add custom fonts to my React native mobile app?

Yes, indeed! React Native has a rich library of React Native font family. You can choose any of those fonts as well as can add custom fonts for your mobile app. We’ve mentioned a step-by-step process in our blog, you can follow the same to add custom fonts.

Tarun Modi
Written by Tarun Modi

Tarun Modi is a Project Leader at WEDOWEBAPPS . He has knowledge about both project management and time management. His expertise includes analyzing the technical needs of the clients, proposing effective solutions and delivering large-scale projects on time.