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.

Load fonts from document.fonts

See original GitHub issue

Hi 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 from 2021-11-11 20-23-49

Screenshot (the text at the top is actually an image, so it appears in the same way)

videomatik-screenshot (21)

Expected Result

videomatik-screenshot (22)

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

AntonioRedondocommented, Nov 14, 2022

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:

const urlToFontFile = 'something';
const fontName = 'something';

const response = await fetch(urlToFontFile);
const fontArrayBuffer = await response.arrayBuffer();

const style = document.createElement('style');
style.textContent = `
  @font-face {
    font-family: '${fontName}';
    src: url(${fontArrayBuffer});

const nodeWithCustomFontFace = document.createElement('div'); = fontName;
nodeWithCustomFontFace.textContent = 'I look pretty';

const myCanvas = await htmlToImage.toCanvas(nodeWithCustomFontFace); // It should render with the custom font
noeRlscommented, Aug 22, 2022


Read more comments on GitHub >

github_iconTop Results From Across the Web

Document.fonts - Web APIs | MDN
The FontFaceSet interface is useful for loading new fonts, checking the status of previously loaded fonts etc. Examples. Doing operation after ...
Read more >
The Best Font Loading Strategies and How to Execute Them
Zach Leatherman wrote up a comprehensive list of font loading strategies that have been widely shared in the web development field.
Read more >
Add a font - Microsoft Support
All fonts are stored in the C:\Windows\Fonts folder. You can also add fonts by simply dragging font files from the extracted files folder...
Read more >
Use fonts in InDesign - Adobe Support
Go to Control panel > Font Family drop-down; Go to Properties panel > Font Family drop-down. Work with missing fonts ...
Read more >
How To Load and Use Custom Fonts with CSS | DigitalOcean
You will use the font stack, a rank ordering of fonts based on availability, to use fonts that may be installed on the...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found