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
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);
Also Read: Top React Tools & Libraries That Every React Native Developer Must Know
Supported React native text font family list for iOS
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);
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 |
Zapfino |
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
module.exports = { project: { ios: {}, android: {}, // grouped into "project" }, assets: ["./assets/fonts/"], // stays the same };
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
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 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
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.
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.
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.
React Natives uses the default font family per the platforms. It’s “Roboto” for Android and “San Francisco” for iOS.
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.