Skip to content

Instantly share code, notes, and snippets.

@olamigokayphils
Forked from hilkeheremans/howto
Created December 8, 2020 19:20
Show Gist options
  • Save olamigokayphils/1dc972d4d25f47ece06f1c11b6f28d71 to your computer and use it in GitHub Desktop.
Save olamigokayphils/1dc972d4d25f47ece06f1c11b6f28d71 to your computer and use it in GitHub Desktop.
Fonts in React Native for Android vs iOS
REACT NATIVE IOS vs ANDROID FONT USE
Tested for React Native 0.41+
IOS:
- Place the fonts in the assets and make sure they are bundled along
- On iOS, fontFamily in Text match the Font Family name as described in Font Book (macOS). Font weights can be specified exactly.
ANDROID:
On Android, there are two ways of using fonts:
METHOD 1: using the font family without, or with _bold or _bold_italic suffix. This requires your fonts to be named as follows `fontname_bold.ttf or otf`, `fontname_bold_italic.ttf or otf` etc. You can then access these fonts using `style={ fontFamily: 'Font Family Name', fontWeight: 'bold', fontStyle: 'italic'}.
Unfortunately this only works for these styles -- there is no light, semibold, black, etc.
METHOD 2: full font support. In this case, on Android, fontFamily in Text must EXACTLY match the FILENAME of the font file (OTF or TTF) and be placed in /assets/fonts.
Font Weight MUST be set to '400' or less or it will break. The font weight should be set by specifying the correct file to use.
It is probably easiest to use a mapping like this and use that to set the fontFamily on your Text:
const ANDROID_MAPPINGS = {
'Brandon Text': {
100: 'BrandonTextLight',
200: 'BrandonTextLight',
300: 'BrandonTextLight',
400: 'BrandonTextBold',
500: 'BrandonTextBold',
600: 'BrandonTextBold',
700: 'BrandonTextBold',
800: 'BrandonTextBold'
},
'Open Sans': {
100: 'OpenSansLight',
200: 'OpenSansLight',
300: 'OpenSansLight',
400: 'OpenSansRegular',
500: 'OpenSansSemibold',
600: 'OpenSansBold',
700: 'OpenSansBold',
800: 'OpenSansExtraBold'
}
}
OVERALL it should be possible to submit a PR to RN to allow full font usage, but it would require the user mapping the various possibilities to the appropriate font files.
This is probably best done on the native side to preserve perf and allow for a unified API, and involve something like
```
.addFontFamily("Open Sans", "500", "OpenSansBold.ttf")
.addFontFamily("Open Sans", "600", "OpenSansBold.ttf")
.addFontFamily("Open Sans", "700", "OpenSansBold.ttf")
```
which would allow use such as
`<Text style={{ fontFamily: 'Open Sans', fontWeight: "700"}`
In addition we could define a mapping from things like `light` and `bold` to their stringy numeric counterparts.
References:
Source code here: https://github.com/facebook/react-native/blob/0.42-stable/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java
https://developer.android.com/reference/android/graphics/Typeface.html
http://stackoverflow.com/questions/19691530/valid-values-for-androidfontfamily-and-what-they-map-to
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment