react-native-render-html FontFamily attribute not working

Question

Today I try to use this library to render raw html in my React Native app. Here my code:

import HTML from "react-native-render-html";
const htmlContent = `
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">Ch&acirc;́t X (C</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">x</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">H</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">y</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">O</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">4</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">N</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">) là mu&ocirc;́i amoni của axit cacboxylic đa chức; ch&acirc;́t Y (C</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">m</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">H</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">n</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">O</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">N</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">) là mu&ocirc;́i amoni của một amino axit. Cho m gam E g&ocirc;̀m X và Y (có tỉ lệ mol tương ứng là 3 : 5) tác dụng h&ecirc;́t với lượng dư dung dịch NaOH đun nóng, thu được 4,928 lít (đktc) h&ocirc;̃n hợp khí (g&ocirc;̀m 2 ch&acirc;́t hữu cơ là đ&ocirc;̀ng đẳng liên ti&ecirc;́p) có tỉ kh&ocirc;́i so với hiđro bằng 383/22 và 19,14 gam h&ocirc;̃n hợp mu&ocirc;́i. Ph&acirc;̀n trăm kh&ocirc;́i lượng của Y trong E là </span></p>
</div>
</div>
</div>
`;

const App = () => {

  return (

    <ScrollView style={{ flex: 1 }}>
      <HTML
        html={htmlContent} tagsStyles={{
          span: { fontFamily: 'TimesNewRomanPSMT', color:'red' }
        }}
        imagesMaxWidth={Dimensions.get("window").width}
      />
    </ScrollView>
    // <Text style={{ fontFamily: 'TimesNewRomanPSMT', fontSize: 44 }}>affdf</Text>

  );
};

I downloaded the font and linked it successfully. The Text below already rendered successfully. However in HTML tag it still not render. It only renders the color and fontStyle attribute. Could anyone help me to solve this problem ?

score 12 · Answer 1 · answered Sep 04 '21 at 00:44

You need to set the systemFonts Prop:

import RenderHtml, { defaultSystemFonts } from 'react-native-render-html';
const systemFonts = [...defaultSystemFonts, 'Montserrat-Regular', 'Montserrat-Bold'];
<RenderHtml 
  contentWidth={Dimensions.get('window').width}
  source={{ html: htmlSource }} 
  tagsStyles={{a: {color:'#58585A',textDecorationLine:'none', fontSize:16, fontFamily:'Montserrat-Bold',lineHeight: 23},p:{**fontFamily:'Montserrat-Regular**',lineHeight: 23,color:'#58585A',fontSize:16,marginBottom:16}, img:{display: 'none'}}} 
  systemFonts={systemFonts}
                  />

It's important to set the systemFonts Prop in RenderHtml component and make sure you have react-native-render-html v:6.0.0 >

Check their documentation about this systemFonts Prop

score 0 · Answer 2 · answered Aug 28 '20 at 08:34

I tried to reproduce your example in an Expo snack here: https://snack.expo.io/@jsamr/stack-overflow-63626884

If you take a look a the Web renderer on the right, you'll notice that the appropriate font is displayed (in this example, monospace). Are you sure you configured the font appropriately?

react-native-render-html FontFamily attribute not working

2 Answers2