React-native-render-html: Unrecognized font family

Created on 20 May 2020 · 9Comments · Source: meliorence/react-native-render-html

Simulator Screen Shot - iPhone X - 2020-05-20 at 13 11 05

1.Unrecognized font family 'serif'

bug css FAQ candidate

Source

ankitnasitmit

Most helpful comment

@aje It was closed by the author! This error is probably caused by inline style. This is a known issue and we should be better at documenting the caveats; you can add font-style to the list of forbidden rules with the prop ignoredStyles={['font-family']}

jsamr on 16 Jul 2020

👍7 ❤6 🎉2 🚀1

All 9 comments

https://github.com/react-native-training/react-native-fonts

ankitnasitmit on 20 May 2020

I'm with the same problem _Unrecognized font family 'Arial, Helvetica, sans-serif'_ and the case is, should I know every font that the user could use and import it to my app?

There's no way to replace an unrecognized font family for another one, like browsers do?

Thanks

NandoMB on 4 Jun 2020

why this issue is closed without any response?

aje on 30 Jun 2020

👍2

Got the same issue. tried to de delete the node style but style the same.

zkerkeb on 16 Jul 2020

jsamr on 16 Jul 2020

👍7 ❤6 🎉2 🚀1

I have found a fix for my issue, i had to delete the styles of any element who had the fontFamily style in it, i used alterChildren props to do so.

   alterChildren={node => {
                if (node.name === 'time') {
                  if (node?.attribs?.style) {
                    delete node.attribs.style
                  }
                }
                if (node.name === 'a') {
                  if (node?.attribs?.style) {
                    delete node.attribs.style
                  }
                }
                if (node.name === 'p') {
                  if (node?.attribs?.style) {
                    delete node.attribs.style
                  }
                }
                if (node.name === 'div') {
                  delete node.attribs.style
                }
                return node.children
              }}

may be that's not the best solution, let me know if there is a better way.

zkerkeb on 16 Jul 2020

Hello i was closed the bug because i saw this document. https://github.com/react-native-training/react-native-fonts

ankitnasitmit on 16 Jul 2020

if you want to ignore the font-family,
<HTML html={htmlContent} contentWidth={ contentWidth } ignoredStyles = {['font-family']} />