Load fonts from document.fonts
See original GitHub issueHi there, html-to-image
is great lib for us!
Expected Behavior
It would be good if it loaded fonts from documents.fonts
too.
Loading the fonts from document.fonts
would solve this issue and give a more consistent result with the UI.
Currently, it appears that only the fonts that are on a @font-face
in a <style>
tag are loaded for the screenshot
Possible Solution
We can use document.fonts.entries()
to iterate over all loaded fonts and use it to load the fonts in the same way it is done in CSS.
It could possibly replace the currently adopted solution as fonts loaded through CSS appear on document.fonts
too.
Additional Context
I’m working on a product that loads fonts directly into document.fonts
, because we load fonts dynamically based on some user inputs.
The fonts are rendered on the HTML without problems, but they just don’t appear on the screenshot.
I’ve currently worked this out on our product by dynamically injecting the <style>
element with the @font-face
too.
But I believe it would be good for this lib to support it directly too.
I would be willing to contribute.
Our UI
Screenshot (the text at the top is actually an image, so it appears in the same way)
Expected Result
Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:13 (1 by maintainers)
It would be great to support fonts loaded with the
documents.fonts
API. html2canvas supports this feature. But I prefer html-to-image as it’s faster and renders text better.Meanwhile, a way to load fonts asynchronously and use them with html-to-image is:
+1