Custom Fonts Not Applying in Inline Styles (React Native RenderHTML)

[vasanshettiTharun]

Decision Table

• [x] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• [x] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• [x] I have read the HELP document here: https://git.io/JBi6R
• [x] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• [x] I have confirmed that this bug has not been reported yet

Description

Description I am facing an issue where custom fonts do not apply when using inline styles inside RenderHTML. However, the same font works perfectly in a React Native <Text> component.

React Native Information

React Native: 0.78.0

RNRH Version

"react-native-render-html": "^6.3.4",

Tested Platforms

• [x] Android
• [x] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Reproduction Platforms

• [x] Android
• [x] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Minimal, Reproducible Example

Install custom fonts and link them properly.

Use a standard <Text> component to verify the font is working.

Use RenderHTML with an inline

Text

.

The font does not render.

Expected Behavior The text inside RenderHTML should render with the specified font.

Actual Behavior The text does not render with the expected font. It falls back to a default sans-serif font.

Reproducible Code Sample import React, { useMemo } from 'react'; import RenderHTML from 'react-native-render-html'; import { Text, useWindowDimensions, View } from 'react-native';

export const Html = React.memo(({ isDarkmode }) => { const { width } = useWindowDimensions();

const systemFonts = useMemo(() => [ 'Jameel Noori Nastaleeq', '1 MUHAMMADI QURANIC', 'Al Qalam Quran Majeed Web2_D', ], []);

const generateHTML = useMemo(() => <p style="font-size: 21px; font-family: '1 MUHAMMADI QURANIC'; text-align: center;"> بسم اللہ الرحمن الرحیم </p>, [isDarkmode]);

return ( <View> <Text style={{ fontFamily: '1 MUHAMMADI QURANIC' }}> This text renders correctly </Text> <RenderHTML contentWidth={width} source={{ html: generateHTML }} systemFonts={systemFonts} /> </View> ); });

Additional Notes

The issue persists on both Android and iOS.

The font renders fine in a standard <Text> component.

Only fails when used inside RenderHTML.

[VojinovicMirko]

Try to add defaultTextProps prop:

<RenderHTML defaultTextProps={{ style: { fontFamily: "1 MUHAMMADI QURANIC", }, }} source={{ html: generateHTML }} contentWidth={width} />

[vasanshettiTharun]

@VojinovicMirko1999 but i have more than 1 custom font like i have a total of 3 including this so how can i add other 2

[VojinovicMirko]

Yes, you have right. Than try this, it works for me - example with 2 fonts:

const { width } = useWindowDimensions(); const mixedStyle = { p: { fontFamily: "OpenSans_700Bold", fontSize: 14, }, b: { fontFamily: "OpenSans_400Medium", fontSize: 14, }, };

return ( <RenderHTML tagsStyles={mixedStyle} source={{ html }} contentWidth={width} systemFonts={["OpenSans_700Bold", "OpenSans_400Medium"]} /> );

@vasanshettiTharun

[revenkroz]

I had the same issue, defaultTextProps helped me a lot

[daniyalrathore14]

any luck?