question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if youā€™re still stuck at the end, weā€™re happy to hop on a call to see how we can help out.

fontFamily 'arial, sans-serif' is not a system font ... multiple fonts ?

See original GitHub issue

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">info@aulfg2.org</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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:6
  • Comments:9

github_iconTop GitHub Comments

45reactions
murshudovcommented, Aug 22, 2018

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

Hope it helps šŸ˜Š

2reactions
addingamacommented, Jul 27, 2018

Iā€™m having the same problem. I donā€™t know how to fix this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple fonts in Font-Family property?
Yes. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font,Ā ...
Read more >
CSS font-family property
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries...
Read more >
font-family - CSS: Cascading Style Sheets - MDN Web Docs
The font-family CSS property specifies a prioritized list of one or more font family names ... The default user interface sans-serif font.
Read more >
System Font Stack
One method for applying system fonts is by directly calling them on an element using the font-family property. GitHub uses this method on...
Read more >
CSS Font Family List
Browsers do not support all the fonts, so you need to use multiple fonts to be on ... Specific Font-Family ā€“ This is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found