Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unrecognized font family #369

Closed
ankitnasitmit opened this issue May 20, 2020 · 10 comments · Fixed by #434
Closed

Unrecognized font family #369

ankitnasitmit opened this issue May 20, 2020 · 10 comments · Fixed by #434
Labels
bug Crush'em all. domain:css Related to inline CSS. is:FAQ candidate A canonical issue to put in the FAQ.

Comments

@ankitnasitmit
Copy link

ankitnasitmit commented May 20, 2020

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

1.Unrecognized font family 'serif'

@ankitnasitmit
Copy link
Author

@NandoMB
Copy link

NandoMB commented Jun 4, 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

@aje
Copy link

aje commented Jun 30, 2020

why this issue is closed without any response?

@zkerkeb
Copy link

zkerkeb commented Jul 16, 2020

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

@jsamr jsamr added is:FAQ candidate A canonical issue to put in the FAQ. bug Crush'em all. domain:css Related to inline CSS. labels Jul 16, 2020
@jsamr
Copy link
Collaborator

jsamr commented Jul 16, 2020

@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']}

@zkerkeb
Copy link

zkerkeb commented Jul 16, 2020

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.

@ankitnasitmit
Copy link
Author

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

@jeloagnasin jeloagnasin mentioned this issue Jul 31, 2020
1 task
@KhimGurung
Copy link

KhimGurung commented Nov 23, 2020

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

@jsamr jsamr reopened this Nov 23, 2020
@jsamr jsamr linked a pull request Nov 26, 2020 that will close this issue
41 tasks
@jsamr jsamr mentioned this issue Nov 26, 2020
41 tasks
@jsamr
Copy link
Collaborator

jsamr commented Nov 26, 2020

This issue has been fixed in the Foundry release. Try it out now! See #430 for instructions.

@jsamr jsamr closed this as completed in #434 Jun 8, 2021
@jaydips2020

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Crush'em all. domain:css Related to inline CSS. is:FAQ candidate A canonical issue to put in the FAQ.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants