Load fonts from document.fonts

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 (the text at the top is actually an image, so it appears in the same way)

Expected Result

[AntonioRedondo]

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});
  }
`;
document.head.appendChild(style);

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

const myCanvas = await htmlToImage.toCanvas(nodeWithCustomFontFace); // It should render with the custom font

[noeRls]

+1