H1, H2, H3, H4 Tags aren't rendering custom .ttf fonts in Android.

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.

[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!

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