Placeholder canvas

Best React Nat­ive Font Fam­ily for Mobile App Development

16 May 2023

Are you a busi­ness own­er who wants to serve Android & iOS users with seam­less exper­i­ences and has budget con­straints as well? If that answers yes, your busi­ness needs hybrid mobile apps. React Nat­ive frame­work is the ulti­mate choice among app developers for cross-plat­form app development.

Being an open-source frame­work, React Nat­ive have numer­ous lib­rar­ies of nat­ive ele­ments, includ­ing APIs, nav­ig­a­tion, fancy vec­tor icons, anim­a­tions, and font fam­il­ies. Its com­munity mem­bers are con­stantly adding value with the addi­tion of more lib­rar­ies. Though there can be sev­er­al details around React nat­ive lib­rar­ies, this blog will be con­fined to dis­cuss­ing React nat­ive font family. 

What is React Nat­ive font family? 

The core com­pon­ent here is the Text con­figured to dis­play text on the screen to the users. This com­pon­ent sup­ports styl­ing, nest­ing, and touch hand­ling. Titles and body text with sim­il­ar styl­ing are often grouped togeth­er as fonts of the same fam­ily are referred to as font fam­ily. As developers use font­Fam­ily while writ­ing code in React Nat­ive, the text will auto­mat­ic­ally inher­it prop­er­ties and font styl­ing of the font fam­ily it belongs to. 

React Nat­ive text font fam­ily list

Though React Nat­ive default font is San Fran­cisco for iOS and Roboto for android, there are plenty oth­er font fam­il­ies that both OSs support. 

Sup­por­ted React nat­ive text font fam­ily list for Android


import React, { Component } from 'react';
import { AppRegistry, ScrollView, Text, StyleSheet} from 'react-native';

    scroller: {
        flex: 1,

export default class AndroidFonts extends Component{
  render (){
      <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>        

AppRegistry.registerComponent('AndroidFonts', () => AndroidFonts);

Also Read: Top React Tools & Lib­rar­ies That Every React Nat­ive Developer Must Know

Sup­por­ted React nat­ive text font fam­ily list for iOS

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


If you want  use oth­er font fam­il­ies please refer to the below table -

Academy Engraved LET Academy­En­graved­Let­Plain
Al Nile AlNile-Bold
Amer­ic­an Typewriter Amer­ic­an­Type­writer-Bold
Amer­ic­an­Type­writer-Con­densed Amer­ic­an­Type­writer-Con­densed­Bold
Amer­ic­an­Type­writer-Con­densed­Light Amer­ic­an­Type­writer-Light
Apple Col­or Emoji Apple SD Goth­ic Neo
Apple­ColorE­moji AppleS­DGoth­icNeo-Bold
AppleS­DGoth­icNeo-Light AppleS­DGoth­icNeo-Medi­um
AppleS­DGoth­icNeo-Reg­u­lar AppleS­DGoth­icNeo-SemiBold
AppleS­DGoth­icNeo-Thin AppleS­DGoth­icNeo-Ultr­a­Light
Arial Arial Hebrew
Arial Roun­ded MT Bold Arial-BoldIt­alicMT
Arial-Bold­MT Arial-ItalicMT
Arial­Hebrew Arial­Hebrew-Bold
Arial­Hebrew-Light ArialMT
Arial­Roun­ded­MT­Bold Avenir
Avenir Next Avenir Next Condensed
Avenir-Black Avenir-Black­Ob­lique
Avenir-Book Avenir-BookOb­lique
Avenir-Heavy Avenir-Heavy­Ob­lique
Avenir-Light Avenir-LightOb­lique
Avenir-Medi­um Avenir-Medi­umOb­lique
Avenir-Oblique Avenir-Roman
AvenirNext-Bold AvenirNext-BoldIt­al­ic
AvenirNext-DemiBold AvenirNext-DemiBoldIt­al­ic
AvenirNext-Heavy AvenirNext-Heavy­It­al­ic
AvenirNext-Ital­ic AvenirNext-Medi­um
AvenirNext-Medi­umIt­al­ic AvenirNext-Reg­u­lar
AvenirNext-Ultr­a­Light AvenirNext-Ultr­a­Light­It­al­ic
AvenirNextCon­densed-Bold AvenirNextCon­densed-BoldIt­al­ic
AvenirNextCon­densed-DemiBold AvenirNextCon­densed-DemiBoldIt­al­ic
AvenirNextCon­densed-Heavy AvenirNextCon­densed-Heavy­It­al­ic
AvenirNextCon­densed-Ital­ic AvenirNextCon­densed-Medi­um
AvenirNextCon­densed-Medi­umIt­al­ic AvenirNextCon­densed-Reg­u­lar
AvenirNextCon­densed-Ultr­a­Light AvenirNextCon­densed-Ultr­a­Light­It­al­ic
Bangla Sangam MN Bask­erville
Bask­erville-Bold Bask­erville-BoldIt­al­ic
Bask­erville-Ital­ic Bask­erville-SemiBold
Bask­erville-SemiBoldIt­al­ic Bodoni 72
Bodoni 72 Oldstyle Bodoni 72 Smallcaps
Bodoni Orna­ments Bodo­ni­Orna­ment­sITCTT
Bodon­iS­vtyT­woITCTT-Bold Bodon­iS­vtyT­woITCTT-Book
Bodon­iS­vtyT­woITCTT-Book­Ita Bodon­iS­vtyT­woOS­ITCTT-Bold
Bodon­iS­vtyT­woOS­ITCTT-Book Bodon­iS­vtyT­woS­CITCTT-Book
Brad­ley Hand Brad­ley­Han­dITCTT-Bold
Chalk­board SE Chalk­boardSE-Bold
Chalk­boardSE-Light Chalk­boardSE-Reg­u­lar
Chalk­dust­er Chalk­dust­er
Coch­in Coch­in-Bold
Coch­in-BoldIt­al­ic Coch­in-Ital­ic
Cop­per­plate Cop­per­plate-Bold
Cop­per­plate-Light Cour­i­er
Cour­i­er New Cour­i­er-Bold
Cour­i­er-Bol­dOb­lique Cour­i­er-Oblique
Couri­erNewPS-BoldIt­alicMT Couri­erNewPS-Bold­MT
Couri­erNewPS-ItalicMT Couri­erNewPSMT
Dam­as­cus Dam­as­cus­Bold
Dam­as­cus­Light Dam­as­cusMe­di­um
Dam­as­cusSemiBold Devanagari Sangam MN
Devanagar­iS­angamMN Devanagar­iS­angamMN-Bold
Didot Didot-Bold
Didot-Ital­ic Diwan­Mis­hafi
Euphemia UCAS EuphemiaUCAS-Bold
EuphemiaUCAS-Ital­ic Farah
Futura Futura-Con­dense­dEx­tra­Bold
Futura-Con­densedMe­di­um Futura-Medi­um
Futura-Medi­umIt­al­ic Geeza Pro
GeezaPro-Bold Geor­gia
Geor­gia-Bold Geor­gia-BoldIt­al­ic
Geor­gia-Ital­ic Gill Sans
Gill­S­ans-Bold Gill­S­ans-BoldIt­al­ic
Gill­S­ans-Ital­ic Gill­S­ans-Light
Gill­S­ans-Light­It­al­ic Gill­S­ans-SemiBold
Gill­S­ans-SemiBoldIt­al­ic Gill­S­ans-Ultra­Bold
Gujar­ati Sangam MN Gujar­a­t­iS­angamMN
Gujar­a­t­iS­angamMN-Bold Gur­mukhi MN
Gur­mukhiMN-Bold Heiti SC
Heiti TC Hel­vetica
Hel­vetica Neue Hel­vetica-Bold
Hel­vetica-Bol­dOb­lique Hel­vetica-Light
Hel­vetica-LightOb­lique Hel­vetica-Oblique
Hel­veticaNeue-Bold Hel­veticaNeue-BoldIt­al­ic
Hel­veticaNeue-Con­densed­Black Hel­veticaNeue-Con­densed­Bold
Hel­veticaNeue-Ital­ic Hel­veticaNeue-Light
Hel­veticaNeue-Light­It­al­ic Hel­veticaNeue-Medi­um
Hel­veticaNeue-Medi­umIt­al­ic Hel­veticaNeue-Thin
Hel­veticaNeue-Thin­It­al­ic Hel­veticaNeue-Ultr­a­Light
Hel­veticaNeue-Ultr­a­Light­It­al­ic Hira­gino Min­cho ProN
Hira­gino Sans Hira­ginoSans-W3
Hira­ginoSans-W6 HiraM­in­ProN-W3
HiraM­in­ProN-W6 Hoe­fler Text
Hoe­fler­Text-Black Hoe­fler­Text-Black­It­al­ic
Hoe­fler­Text-Ital­ic Hoe­fler­Text-Reg­u­lar
Iow­an Old Style Iow­an­Old­Style-Bold
Iow­an­Old­Style-BoldIt­al­ic Iow­an­Old­Style-Ital­ic
Iow­an­Old­Style-Roman Kailasa
Kailasa-Bold Kan­nada Sangam MN
Kan­nadaSangamMN Kan­nadaSangamMN-Bold
Khmer Sangam MN Kohinoor Bangla
Kohinoor Devanagari Kohinoor Telugu
Kohinoor­B­angla-Light Kohinoor­B­angla-Reg­u­lar
Kohinoor­B­angla-Semibold KohinoorDevanagari-Light
KohinoorDevanagari-Reg­u­lar KohinoorDevanagari-Semibold
Kohinoor­Telugu-Light Kohinoor­Telugu-Medi­um
Kohinoor­Telugu-Reg­u­lar Lao Sangam MN
Malay­alam Sangam MN Malay­alam­SangamMN
Malay­alam­SangamMN-Bold Mark­er Felt
Mark­er­Felt-Thin Mark­er­Felt-Wide
Menlo Menlo-Bold
Menlo-BoldIt­al­ic Menlo-Ital­ic
Menlo-Reg­u­lar Mis­hafi
Note­worthy Note­worthy-Bold
Note­worthy-Light Optima
Optima-Bold Optima-BoldIt­al­ic
Optima-Extra­B­lack Optima-Ital­ic
Optima-Reg­u­lar Oriya Sangam MN
Oriy­aS­angamMN Oriy­aS­angamMN-Bold
Pal­atino Pal­atino-Bold
Pal­atino-BoldIt­al­ic Pal­atino-Ital­ic
Pal­atino-Roman Papyr­us
Papyr­us-Con­densed Party LET
PartyLet­Plain Ping­Fang HK
Ping­Fang SC Ping­Fang TC
Ping­FangHK-Light Ping­FangHK-Medi­um
Ping­FangHK-Reg­u­lar Ping­FangHK-Semibold
Ping­FangHK-Thin Ping­FangHK-Ultr­a­light
Ping­Fang­SC-Light Ping­Fang­SC-Medi­um
Ping­Fang­SC-Reg­u­lar Ping­Fang­SC-Semibold
Ping­Fang­SC-Thin Ping­Fang­SC-Ultr­a­light
Ping­FangTC-Light Ping­FangTC-Medi­um
Ping­FangTC-Reg­u­lar Ping­FangTC-Semibold
Ping­FangTC-Thin Ping­FangTC-Ultr­a­light
Savoye LET Savoye­Let­Plain
Sin­hala Sangam MN Sin­halaS­angamMN
Sin­halaS­angamMN-Bold Snell Round­hand
Snell­Round­hand-Black Snell­Round­hand-Bold
Sym­bol Tamil Sangam MN
TamilS­angamMN-Bold Telugu Sangam MN
Thon­buri Thon­buri-Bold
Thon­buri-Light Times New Roman
Times­Ne­wRo­man­PS-BoldIt­alicMT Times­Ne­wRo­man­PS-Bold­MT
Times­Ne­wRo­man­PS-ItalicMT Times­Ne­wRo­man­PSMT
Treb­uchet MS Treb­uchet-BoldIt­al­ic
Treb­uchetMS-Bold Treb­uchetMS-Ital­ic
Verd­ana Verd­ana-Bold
Verd­ana-BoldIt­al­ic Verd­ana-Ital­ic
Zapf Ding­bats Zapf­D­ing­bat­sITC

How to add cus­tom fonts in React native ?

In addi­tion to the exist­ing lib­rary of React nat­ive font fam­ily, you can per­son­al­ize your mobile apps by installing cus­tom font fam­il­ies. Shar­ing the step-by-step pro­cess with you here. 

1. Select a font fam­ily you would like to use. Don’t for­get to check the file name. For Android, the file name remains the same, but for iOS, the Post­Script name” will be added before the file name. So, you need to rename the font files; if you are using the font SF UI Dis­play” and its files are like the ones shown below, then for iOS, you have to use SFUID­isplay-Bold” des­pite your file name SFUIDisplayBold.otf”.

How to add custom fonts in React native

2. Next step is the addi­tion of fonts to assets. 

3. Now you have to define the assets dir­ect­ory, when using React Nat­ive ver­sion ≥ 0.60 cre­ate file react-native.config.js and add below code 

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  assets: ["./assets/fonts/"], // stays the same

4. If you are still using React Nat­ive ver­sion < 0.60. You need to men­tion the loc­a­tion of cus­tom fonts in React nat­ive. Adding the below lines in package.json can make it hap­pen 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 Devel­op­ment Frame­work Is Right For You?

5. Next thing is to link assets. Due to auto-link­ing, link and unlike com­mands are now removed from React Nat­ive 0.69. So, for the ver­sions above 0.69 run below com­mand in terminal 

npx react-nat­ive-asset

And, for ver­sions below 0.69 use 

$ npx react-nat­ive link 

For iOS link com­mand will link fonts in Info.plst and for Android cre­ates dir­ect­ory (android/app/src/main/assets/fonts). 

6. Now, you can use this newly added font­Fam­ily” any­where in the app using React nat­ive styles

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"

React Nat­ive Paper Fonts

I’m sure you’ve heard of React Nat­ive paper, if not, let me tell you that it’s renowned design lib­rary for React nat­ive com­pon­ents. Like React Nat­ive, it is open-source and avail­able for free. Mobile app developers often use its high-qual­ity design ele­ments to bring a nat­ive feel to the app. Itʼs led by call­stack and has offi­cial Face­book part­ners as contributors.

Also Read: React Nat­ive Tutori­als — Learn to Build Nat­ive Mobile Apps with React

React Nat­ive Paper gives you access to com­pact code to code for UI/UX design of your mobile app. Hence, saves you a lot of time writ­ing long and com­plex code for sev­er­al use cases from scratch. 

Learn to install cus­tom fonts using .ttf files, con­fig­ure fonts in ThemePro­vider and addi­tion of font vari­ants to the mater­i­al design from React Nat­ive Git­Hub lib­rary here

Wrap­ping Up 

To get a cross-plat­form mobile app for your busi­ness, React Nat­ive app devel­op­ment ser­vices can help you at their best. WeDoWebApps is a React Nat­ive app devel­op­ment com­pany with strong expert­ise in design­ing desir­able mobile applic­a­tions. To ini­ti­ate your React Nat­ive pro­ject, share your require­ments here. also, read more about React Nat­ive Upgrade Help­er: Stream­line Your App Upgrades with Ease and Which Mobile App Devel­op­ment Frame­work 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.

Share this post :