Skip to content

Custom Fonts

Alberto Martínez edited this page Aug 20, 2018 · 1 revision

On Android

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.

On iOS

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.

iOS Larger Accessibility Sizes

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

Clone this wiki locally