react-native-training / react-native-fonts

Fonts available out of the box in a React Native project

Fonts Available in React Native out of the box

If I've missed a font, please submit a pr or an issue

To use in project, choose from font below, and then add to style element:

<Text style={{ fontFamily: 'Iowan Old Style' }}>Custom Font</Text>

Android

normal

notoserif

sans-serif

sans-serif-light

sans-serif-thin

sans-serif-condensed

sans-serif-medium

serif

Roboto

monospace

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-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

react-native-fonts's Issues

is there only a readme ？how it work？

waiting u reply, thanks you

Font viewer

Hi, thanks for the list of fonts, it helped me out quite a lot as I have loaded it into a list and rendered in a view.

If you are interested in the code is here. The app displays a section list with all the different fonts and font weights. I tend to design these sorts of apps to learn and as a communication tool with my designers (that way we develop a common framework to generate a design without having six different styles of a heading.

Feel free to download the code and play with it.

Duplicated fonts

Just duplicated.

https://github.com/react-native-training/react-native-fonts/blame/master/README.md#L225-L227

README.md

224 
225 Chalkduster
226 
227 Chalkduster
228

which default font pick by android and ios if we not provided font-family

which default font pick by android and ios if we not provided font-family?

Show preview of fonts

It would be nice if we can see a preview of the fonts next to their name.

Please add Lato font

https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i

Why does Android have exponentially fewer default fonts then iOS?

thanks for putting this together

Appreciate your effort! Nice to have them conveniently listed out here.

Feels like developers that support more than the latest OS would appreciate having OS version numbers into this list.
e.g. San Francisco officially arrived starting with iOS 9.

Thanks for sharing.

View previews of fonts

Thanks for putting this list together. Can we add visuals for each font to this document, so we can use it as a reference when selecting the right one?

The app is un-runnable

First I had the RCTRootView.h problem, got passed that, then it failed to find the JS dependencies (even though I had run and built successfully).

This project is definitely valuable and deserves some attention, it would be great if you'd fix it up!

Can these fonts be used in a product, or are they copyright protected?

Thanks to anyone who can answer the question in the title!

Sans Serif Fonts

Thanks for the list. It would be nice to categorize the existing fonts (by adding the category in braces maybe). Here is a non-guaranteed list for Sans Serif fonts in both platforms for anyone who is interested:

Sans Serif Fonts

Android

• Notoserif
• Roboto
• sans-serif (-light, -thin, -condensed, -medium)

iOS

• Arial (, -BoldItalicMT, BoldMT, -ItalicMT)
• Arial Rounded MT
• Avenir
• AvenirNex (-Regular, -Bold, -BoldItalic, -Medium, -MediumItalic, -UltraLight, -UltraLightItalic, -Heavy, - HeavyItalic, -DemiBold, -DemiBoldItalic)
• Futura (, -Medium, MediumItalic, CondensedMedium, -CondensedExtraBold)
• Gill Sans (, -Bold, -Italic, -BoldItalic, -LightItalic, -SemiBold, -SemiBoldItalic, -UltraBold)
• Helvatica (, -Bold, -BoldOblique, -Light, -LightOblique, -Oblique)
• Helvatica Neue (lots of variants)
• Sans Francisco
• Trebuchet MS (, -Bold, -Italic, Trebuchet-BoldItalic)
• Verdana (, -Bold, BoldItalic, -Italic)

I need MaisonNeue font

Please add MaisonNeue font in react native

Any way to get San Francisco Condensed?

I've tried all manner of combinations (San Francisco Condensed, San-Francisco-Condensed, System-Condensed, etc), but can't seem to get the condensed version of this typeface. I know it exists (it's part of the official font download), but I'm at a loss at how to use it!

niceJob

Thanks for the effort you put together

San Francisco is not a system font?

Hey,

First of all, thanks for putting this together.

I have issues with the San Francisco font on my iPhone 6 emulator, iOS 10.3. Expo claims that it is not a system font, and must be loaded through Expo.Font.loadAsync ?

Testing some other fonts, it works fine - Arial, Avenir etc., but I consitently get the error on San Fransisco (and on the font mentioned in usage example, too - "Iowan Old Style").

Any idea why?

dont forget SF by apple