React-native-render-html: fontFamily 'arial, sans-serif' is not a system font ... multiple fonts ?

[jalchr]

Hello,

This may be a bug.

I have following html:

<p style="color: #222222; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">The Alumni Association at the Faculty of Engineering in the second branch of the Lebanese University (AULFG2) is organizing specialized training sessions for students in order to better prepare for the entrance exam of the Faculty of Engineering at the Lebanese University.</p><p style="color: #222222; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">The training sessions will be conducted in French. They will be held on<span class="Apple-converted-space">&nbsp;</span><span class="aBn" style="top: -2px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dashed; position: relative; z-index: 0"><span class="aQJ" style="top: 2px; position: relative; z-index: -1">Thursday 29 and Friday 30 June 2017</span></span>, and<span class="Apple-converted-space">&nbsp;</span><span class="aBn" style="top: -2px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dashed; position: relative; z-index: 0"><span class="aQJ" style="top: 2px; position: relative; z-index: -1">Monday</span></span><span class="Apple-converted-space">&nbsp;</span>3,<span class="Apple-converted-space">&nbsp;</span><span class="aBn" style="top: -2px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dashed; position: relative; z-index: 0"><span class="aQJ" style="top: 2px; position: relative; z-index: -1">Tuesday 4 and Wednesday 5 July 2017</span></span>from<span class="Apple-converted-space">&nbsp;</span><span class="aBn" style="top: -2px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dashed; position: relative; z-index: 0"><span class="aQJ" style="top: 2px; position: relative; z-index: -1">8:00 AM until 3:00 PM</span></span>. The sessions will consist of three hours of maths, one and a half hours of physics and one and a half hours of chemistry per day.</p><p style="color: #222222; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">The course fees are $100 per student,&nbsp;<strong><u>REFUNDABLE&nbsp;</u>to students passing the entrance exam.</strong></p><p style="color: #222222; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">Interested students are invited to fill the application form found<span class="Apple-converted-space">&nbsp;</span><a href="http://www.aulfg2.org/upl/pdn_doc_doc_34.docx" style="color: #1155cc" target="_blank">here</a><span class="Apple-converted-space">&nbsp;</span>and send it back with the payment receipt by email to<span class="Apple-converted-space">&nbsp;</span><a style="color: #1155cc" target="_blank">[email protected]</a><span class="Apple-converted-space">&nbsp;</span>or by whatsapp to<span class="Apple-converted-space">&nbsp;</span><a href="tel:03%20907%20700" style="color: #1155cc" target="_blank">03907700</a>.</p>

I'm getting following error:

fontFamily 'arial, sans-serif' is not a system font and has not been loaded through Expo.Font.loadAsync.

Is there any chance it is considering multiple fonts "arial" and "sans-serif" as a single font ??

Any thoughts ?
Thanks

[addingama]

I'm having the same problem. I don't know how to fix this.

[murshudov]

@jalchr, Today I came across the same problem. Fixed it using props:
baseFontStyle={{ fontFamily: "Roboto" }}
ignoredStyles={["font-family", "letter-spacing"]}

Hope it helps 😊

[vohoangankhanh]

I'm facing the same issue

[tkserver]

I'm reading this html from a message board database and using render-html to display it. I have no control over much of the user input. So something which was posted like this, crashes the app:

OMG "<span style="color: #444444;font-family: Aleo, serif;font-size: 16px">I enjoy watching them quit play by play."</span>

[tkserver]

ignoredStyles={["font-family", "letter-spacing"]} fixes the issue.

[minhajul-islam]

@jalchr, Today I came across the same problem. Fixed it using props:
baseFontStyle={{ fontFamily: "Roboto" }}
ignoredStyles={["font-family", "letter-spacing"]}

Hope it helps 😊

works ,thanks a lot

[gypsicoder]

@murshudov But, I am facing another problem. In my html text there are bold tags which fontfamily isn't changing to the given fontFamily for example "Roboto". The normal texts are showing in the correct fontFamily.

[murshudov]

@gypsicoder I had the same problem with bold text, but unfortunately couldn't work around it

[ihsanktmr]

Thanks it worked

@jalchr, Today I came across the same problem. Fixed it using props:
baseFontStyle={{ fontFamily: "Roboto" }}
ignoredStyles={["font-family", "letter-spacing"]}

Hope it helps 😊