Using custom fonts in React Native, I want to apply CSS for Text elements that cascade to child elements. From what I can find, in order to apply a style you must specify the exact font with the style variation. E.g. fontFamily: 'Cabin_700Bold'. However, I want to nest components and keep the same fontFamily but vary the other styles. This is possible in React Native and in Android, it doesn't seem to work in iOS when using custom fonts. E.g.:
const InsteadOfThis = (<Text style={{ fontFamily: 'Cabin_400Regular' }}> some regular text<Text style={{ fontFamily: 'Cabin_700Bold' }}> Bold section<Text style={{ fontFamily: 'Cabin_500Italic' }}>Italic but not Bold :(</Text></Text></Text>)const IWantThis = (<Text style={{ fontFamily: 'Cabin' }}> some regular text<Text style={{ fontWeight: 'bold' }}> Bold section<Text style={{ fontStyle: 'italic' }}>bold and italic!</Text></Text></Text>)Is this possible to achieve for iOS with a custom font such as Google Fonts?
(The use case is for output from a WYSIWYG editor where users can apply multiple styling to a text in an arbitrary order. Example: <strong><i><u>This is both bold, italic, and underlined</u></i></strong>. We have a tool to replace each tag with a matching React component, so that e.g. <strong> becomes <MyStrong>)