Custom fontFamily does not work with Text Heading (h1, h2, h3, h4)

I’m loading a custom font using Expo as described here.

Setting the new font as fontFamily style works in regular Text components.

However, as soon as one of the heading props are set on the Text component, the fontFamily is no longer applied.

Example:

import { Text } from 'react-native-elements'

<Text
  h1
  h1Style={{ color: 'red', fontFamily: 'dosis-regular' }}
  style={{ color: 'blue', fontFamily: 'dosis-regular' }}
>This is my text</Text>

This text is large, red and uses the default font. After removing the h1 prop, the text is small, blue and using the Dosis font.

Keeping h1 but removing h1Style, the text is large, blue and using the default font. Keeping h1 but removing style does nothing.

Environment:

software	version
react-native-elements	1.2.7
react-native	0.59.10
expo	35.0.0

[pothos-dev]

Setting fontWeight: 'normal' seems to fix the issue. Loading and setting the Bold variant of the font however doesn’t seem to make any difference, unless the fontWeight is also changed (the custom font ONLY shows up with normal fontWeight).

Maybe the information about which “weight” the font has is getting lost when loaded by expo-font, and all fonts are handled as regular.

For now, I’ll change the default fontWeight of all h-elements in the ThemeProvider, thanks!

[oxyii]

@bearbytes I’m not sure about exactly REGULAR fonts for using with h* props… https://github.com/react-native-elements/react-native-elements/blob/0f06b924fc7536f7599aca268864a75f33e13b1e/src/text/Text.js#L29-L32 Please try to use BOLD font… Or set fontWeight as normal inside h1Style