android/app/src/main/assets/fonts/font_name.ttf
react-native run-android
fontFamily: 'font_name'
in your React Native Styles1. Include the font in your Xcode project.
2. Make sure that they are included in the Target Membership column
Click on the font from the navigator, and check if the font included.
3. Check if the font included as Resource in your bundle
click on your Xcode project file, select "Build Phases, select "Copy Bundle Resources". Check if your font is added.
4. Include the font in Application Plist (Info.plist)
from the application main folder open Info.plist, click on "Information Property List", and then click the plus sign (+). from drop down list choose "Fonts provided by application".
5. Add Font name in Fonts provided by application
expand Fonts Provided by Application and add the Font Name exactly to value column
Use it in the Application
<Text style={{fontFamily:'IndieFlower'}}>
Welcome to React Native!
</Text>
Create a folder in your project folder, and add your fonts to it. Example:
Add the below code in package.json
.
{ ... "rnpm": { "assets": [ "path/to/fontfolder" ] }, ... }
For the example above, our package.json would now have a path of "mystuff/fonts":
"rnpm": {
"assets": [
"mystuff/fonts"
]
}
Run react-native link
command.
Using custom fonts on project below code
<Text style={{ fontFamily: 'FONT-NAME' }}> My Text </Text>
Where FONT-NAME
is the prefix platform specific.
FONT-NAME is the words before the extension in file. Example: Your font's file name is Roboto-Regular.ttf
, so you would set fontFamily: Roboto-Regular
.
FONT-NAME is "Full Name" found after right clicking, on the font file, then clicking on "Get Info". ( Source: https://stackoverflow.com/a/16788493/2529614 ), in the screenshot below, the file name is MM Proxima Nova Ultra bold.otf
, however "Full Name" is "Proxima Nova Semibold", thus you would set fontFamily: Proxima Nova Semibold
. Screenshot -
Run react-native run-ios
or react-native run-android
again (this will recompile with the resources)