react-native-render-html FontFamily attribute not working

Question

react-native-render-html FontFamily attribute not working

11.6k views Asked by Quang Bình Đinh At 07 January 2025 at 01:20

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 ?

Original Q&A

There are 4 answers

**Rodrigo Ventura** · Answer 1 · 2021-09-04T00:44:56+00:00

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

**Ali Safi** · Answer 2 · 2023-10-02T10:55:51+00:00

Ali Safi On 02 October 2023 at 10:55

You need to set the systemFonts Prop:

<RenderHTML systemFonts={['IRANSansX-Bold']} />

**fatemeh kazemi** · Answer 3 · 2023-10-05T08:21:36+00:00

file.js:

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet, Dimensions, Pressable, Image } from 'react-native';
import RenderHtml , { defaultSystemFonts } from 'react-native-render-html';

const CustomComponent = (props) => {
const { width } = Dimensions.get('screen')
const systemFonts = [...defaultSystemFonts, global.fontRegular];
return (
        <>
                   {props.recepie?.data.description &&
                        <RenderHtml
                            contentWidth={width - 30}
                            source={{ html: `<html><body> 
                           <p>${props.recepie?.data.description}</p></body> 
                             </html>` }}
                            tagsStyles={mixedStyle}
                            systemFonts={systemFonts}
                        />}
        </>
    );
};
const mixedStyle = {
    body: {
        fontFamily: 'your global font name',
        color: '#212121'
    },
    p: {
        fontFamily: 'your global font name',
    }
}
export default CustomComponent ;

**Jules Sam. Randolph** · Answer 4 · 2020-08-28T08:34:06+00:00

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?

TechQA.

react-native-render-html FontFamily attribute not working

There are 4 answers

Related Questions in HTML

Related Questions in REACT-NATIVE

Related Questions in FONTS

Related Questions in REACT-NATIVE-RENDER-HTML

Popular Questions

Popular Tags

Trending Questions