Improve font handling and consistency

[saifahn]

Outline

There are a few issues with fonts:

• The fontFamily name is different between iOS and Android.
• Fonts render differently on iOS and Android.
• We do not support different font weights.

These may be separated into separate issues.

Different fontFamily name between OSs

• on iOS, the fontFamily name is the 'PostScript name', which you can find in Font Book.(macOS)
• on Android, the fontFamily will be the FILENAME of the font file.

It may be best to rename the font file to the PostScript name for consistency (and use react-native link again to update?) The logic within the src/styles/typography.ts file would need to be updated as well.

Some references:

• https://gist.github.com/hilkeheremans/acb9949a06ced38ba15a2628f849e33a
• https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4

Fonts render differently on iOS and Android.

It seems like there are various properties within font files that are either ignored or treated differently depending on the mobile OS.

• This is probably why there are some issues with how text looks inside buttons; the vertical alignment is potentially thrown off because of the ascender property.
  • For the JolocomButton, the fix has been to use a hack-y magic number of 15 for paddingVertical to centre it vertically.

Ideally the font file could be edited so that we do not need to rely on magic numbers that vary for different-height buttons, and to keep consistency with Android.

Some references:

• https://stackoverflow.com/questions/41570343/react-native-custom-font-renders-differently-on-android-and-ios/41577138
• https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d

No font weight support

Our font currently only supports one fontWeight as we only include one weight in our project. This is not necessarily a problem if we do not intend on using different weights.

There is actually a problem with having a fontWeight > 400 on Android. If a greater fontWeight is used, it will revert to a default font in bold.

• This is why our react-native-material-ui buttons need to have their fontWeight set; the default is 500 on these buttons.
• Add custom fontFamily xotahal/react-native-material-ui#301 (comment)

Proper support for Android is in a current pull request that has an iffy status

• A current solution may be to follow this comment.
• The above-mentioned guide also uses this pattern.

[SBub]

@saifahn Please check out the recent wallet release v2.2.0, from version 2 onwards we have consistent font