What fonts can you use in your React Native project out of the box?


(Skcript Bot) #1

We have been working with some of our customers to build their products on React Native. For both iOS and Android, and our design team goes all in to create some of the most functionally beautiful experiences.

The challenge here is that, not everything can be translated into actual application from sketches. We used to struggle gathering the typeface support that React Native offers for its applications earlier, and we thought we should make an extensive list of fonts that are avialable in React Native for iOS and Android out of the box.

Supported by iOS

  • San Francisco
  • 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-BookIt
  • BodoniSvtyTwoOSITCTT-Bol
  • BodoniSvtyTwoOSITCTT-Boo
  • BodoniSvtyTwoSCITCTT-Boo
  • Bradley Han
  • BradleyHandITCTT-Bol
  • Chalkboard S
  • 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

Supported by Android

  • normal
  • notoserif
  • sans-serif
  • sans-serif-light
  • sans-serif-thin
  • sans-serif-condensed
  • sans-serif-medium
  • serif
  • Roboto
  • monospace

We’re constantly writing about React Native. Here are some more articles on React Native that might help you:


This is a companion discussion topic for the original entry at https://www.skcript.com/svr/react-native-fonts/

(tom s) #2

Excellent post!

Some more of the best React Native tutorials.