Question 1:
I add a fontFamily to index.android.js’s welcome style, but it takes no effect. Does fontFamily actually work on android?
welcome:{
fontSize:20,
fontFamily:’roboto-thin’,
textAlign:’center’,
margin:10}
Question 2:
if fontFamily works on android, is there a way to load custom font from assets? Or is this some feature to be implemented by react-native?
For Android:
Custom fonts were added with 0.16.0-rc. So you need to have 0.16.0-rc version first and after that you can just download any fonts from the web.
- Put your font files in projectfolder/android/app/src/main/assets/fonts/font_name.ttf
- Remember to recompile which is:
react-native run-android
- And then you can use
fontFamily: 'font_name'
in your style.
Answer:
Also note the following restrictions for custom Android fonts in react-native:
- fonts must be placed in
android/app/src/main/assets/fonts
- only
.ttf
files are supported - The name of the file has to match the
fontFamily
exactly. For instance, iffontFamily
is'Source Sans Pro'
,
the file must be calledSource Sans Pro.ttf
(and NOTSourceSansPro.ttf
). Any suffixes as mentioned in the following paragraph are automatically removed from the file. - When the font is in bold and/or italic, it must use on the following suffixes:
_bold
(e.g.Source Sans Pro_bold.ttf
)_italic
_bold_italic
Answer:
I believe the following is a cleaner alternative to the methods already explained here:
Put all your fonts in you React-Native project directory
./assets/fonts/
Add the following line in your package.json
"rnpm": {
"assets": ["./assets/fonts"]
}
finally run in the terminal from your project directory
$ react-native link
to use it declare this way in your styles
fontFamily: 'your-font-name without extension'
If your font is Raleway-Bold.ttf then,
fontFamily: 'Raleway-Bold'
Source https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4
Answer:
Hello this issue waist for me more than two days with “El+Messiri” font “https://fonts.google.com/specimen/El+Messiri“
i was doing every think write :
- Put your font files in
projectfolder/android/app/src/main/assets/fonts/ElMessiri-Regular.ttf - Remember to recompile which is: react-native run-android And then
-
you can use fontFamily: ‘ElMessiri-Regular’ in your style.
but the fault was that am using fontWeight : ‘bold’ after fontFamily: ‘ElMessiri-Regular’ and the fontWeight was overiding the fontFamily because “El+Messiri” font has his own fontFamily bold wich is “ElMessiri-Bold”
Answer:
This feature has yet to be implemented. See the relevant issue on github here.
Answer:
It seems like custom font was added, check out this commit:
https://github.com/facebook/react-native/commit/bfeaa6a4f531cfc18c097bc9ffb6a8dbe3ddc702
Answer:
For those facing problems with iOS only – which sometimes does not recognize the fontFamily name correctly:
The only solution that solved my problem was to log all the fonts to find out correct naming
(make sure you do the steps below only after adding the assets/fonts and running the react-native link
):
Anyway, to log them, open the appName.xcworkspace
file with xcode and then edit AppDelegate.m putting this lines at the end of the didFinishLaunchingWithOptions
method (and before the return statement):
for (NSString* family in [UIFont familyNames])
{
NSLog(@"%@", family);
for (NSString* name in [UIFont fontNamesForFamilyName: family])
{
NSLog(@" %@", name);
}
}
So, when you run the app (from xcode) it outputs something like this:
This way, I can use the fontFamily Barow-Light or Zapfino inside my react-native styles
Hope it helped!
Tags: androidandroid, react-native