React-native-render-html: H1, H2, H3, H4 Tags aren't rendering custom .ttf fonts in Android.

[Anitorious]

Bug Report

When specifying a custom True Type Font in tagStyles for h1, h2, h3 and/or h4, the font is not applied to the node in Android. v8.x.x^ This works as expected in iOS v10.x.x^ and renders the expected font-family. I haven't been able to find anything in the README or in open/closed issues related to the project.
Oddly, p tags do render the custom font assigned to them as expected.

I attempted to create custom renderers to try and circumvent the issue, as well as replacing all h* tags with a custom, non-standard tag and attempted to style that to no avail.

The style definition is as follows:

export const tagsStyles = {
  p: {
    fontFamily: 'quicksand-medium',
    fontSize: EStyleSheet.value('1rem'),
    lineHeight: EStyleSheet.value('1.2rem'),
    marginVertical: EStyleSheet.value('1rem'),
  },
  ...
  h1: {
    fontFamily: 'omnes-bold',
    color: Palette.$color_hot_pink,
    fontSize: EStyleSheet.value(Type.$type_heading_s),
    lineHeight: EStyleSheet.value(Type.$type_heading_line_height_s),
    marginVertical: EStyleSheet.value('1rem'),
  },
  h2: {
    fontFamily: 'omnes-semibold',
    color: Palette.$color_black,
    fontSize: EStyleSheet.value(Type.$type_heading_s),
    lineHeight: EStyleSheet.value(Type.$type_heading_line_height_xs),
    marginVertical: EStyleSheet.value('0.5rem'),
  }
};

I'd expect to see this:

But instead I get:

Other areas of the application where I use this font, it renders perfectly fine. (Can be seen in the tablet screenshot, 'Busy Hands', above the HTML Content.

[RobPando]

@Anitorious I found a way around this by adding: fontWeight: null to all my header tags styles.

I ran into this problem earlier. It is because the html component has fontWeight: "bold" as a default style value for all header tags https://github.com/archriss/react-native-render-html/blob/3f0c9ad4bf4f5102d3c3c43d35eafa1774fcfd67/src/HTMLDefaultStyles.js#L75 and this somehow (I don't know why) makes android fall back to its default system font, Im guessing is because, as you already must know, for android custom fonts you have to specify the font exactly as it is named in the custom font file and then adding fontweight to that messes it up? I don't know why exactly android does that.

[Anitorious]

I feel like a bit of a pillock but thanks for the heads up. I found that fontWeight: null did not work for my situation, but setting it to;

fontWeight: 'normal'

did the trick. Your help is much appreciated buddy!

[fxbayuanggara]

@Anitorious I found a way around this by adding: fontWeight: null to all my header tags styles.

I ran into this problem earlier. It is because the html component has fontWeight: "bold" as a default style value for all header tags

https://github.com/archriss/react-native-render-html/blob/3f0c9ad4bf4f5102d3c3c43d35eafa1774fcfd67/src/HTMLDefaultStyles.js#L75

and this somehow (I don't know why) makes android fall back to its default system font, Im guessing is because, as you already must know, for android custom fonts you have to specify the font exactly as it is named in the custom font file and then adding fontweight to that messes it up? I don't know why exactly android does that.

You're truly my lifesaver. Thank you so much. Both 'normal' and null is worked for me!

[Aparus]

it didn't help me. fontFamily haven't effect in tagsStyles :(

[jsamr]

@Aparus If you're using foundry, set the systemFonts prop to an array with all the fonts your app is using. This is required because the style engine doesn't want unsupported font to cause a crash from inline styles. Unfortunately, there is not yet a distinction between how inline styles and provided styles are handled. I believe it should be better handled.

[Aparus]

@Aparus If you're using foundry, set the systemFonts prop to an array with all the fonts your app is using. This is required because the style engine doesn't want unsupported font to cause a crash from inline styles. Unfortunately, there is not yet a distinction between how inline styles and provided styles are handled. I believe it should be better handled.

Thank you. Unfortunately I can't check your this advice. I have updated foundry to latest, and now there is another issue (expo web client):

useIMGElementState.ts:24 Uncaught TypeError: _reactNative.Image.getSizeWithHeaders is not a function
    at fetchPhysicalDimensions (useIMGElementState.ts:24)
    at commitHookEffectListMount (react-dom.development.js:19731)
    at commitPassiveHookEffects (react-dom.development.js:19769)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at flushPassiveEffectsImpl (react-dom.development.js:22853)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushPassiveEffects (react-dom.development.js:22820)
    at react-dom.development.js:22699
    at workLoop (scheduler.development.js:597)
    at flushWork (scheduler.development.js:552)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)
fetchPhysicalDimensions @ useIMGElementState.ts:24
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164

[jsamr]

@Aparus I suggest we continue this discussion on discord if you don't mind! https://discord.gg/dbEMMJM