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 KnowSupported 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 |
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 [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]