-
Notifications
You must be signed in to change notification settings - Fork 93
Custom Fonts
If you ask yourself why Android provides so few fonts in relation to iOS, ...me too.
Google recommends that you embed the custom fonts you need together in your app and for this the Android API really shines. All you need to do is copy the font files (.ttf or .otf) into android/app/src/assets/fonts
and you are done.
Alternatively, you can copy them to a directory outside of 'android' and use the rnpm
key of package.json to load them (as is done in the sample App). In this way, RN will copy and register this fonts in iOS as well.
To apply your custom font, use the filename without extension as fontFamily
(iOS requieres the font name).
The name of the available custom fonts can be obtained with the function fontFamilyNames
of rnTextSize.
Unlike Android, iOS provides numerous pre-installed fonts and it is unlikely you require a customized one and its setup is a bit more complicated. But if required, I recommend installing them through package.json or follow one of the several guides in the network.
React Native for iOS support the full range of font weights. Use fontFamily
and its weight and/or style but, if you are curios, look at the rnTextSize fontNamesForFamilyName
function.
Use the base size and allowFontScaling
and test it, RN will do the rest.
You can find more info in the Larger Accessibility Type Sizes and the iOS Font Size Guidelines of "Font Sizes in UI Design: The Complete Guide".