Describe it simply:
When the project have local font file (.woff) and (.css), snapdom not able to get the font and render the font in the generated canvas. The browser still render correctly the original dom. But the canvas generated by snapdom doesnt.
Quick demo to reproduce
Sorry I've been trying codesandbox and stackblitz.com but not able to provide a working demo because their webpack config also doesnt work with local font files in src. So the original dom not even able to render the font so it doesnt really replicate the original issue.
But you can just download some local icon font (woff and css) to src and setup your webpack to be able to bundle and load local font. For example:
./font.css
@font-face {
font-family: 'feather';
src: url('./font.woff') format('woff');
}
.feather {
font-family: 'feather' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-activity:before {
content: '\e81d';
}
./app.js
Then you can see that the browser able to render the font, but the generated canvas doesnt.
Anything else we should know?
The library html-to-image also have the same issue, however, they provide an option call fontEmbedCSS
Check their doc here : https://github.com/bubkoo/html-to-image?tab=readme-ov-file#fontembedcss
const fontEmbedCSS = await htmlToImage.getFontEmbedCSS(element1);
html2Image.toSVG(element1, { fontEmbedCSS });
Initially html-to-image doesnt work, but after i have this config, then it works. Even though im not sure if they have it to solve this issue, but adding the config resolve it
It would be great if snapdom also can consider their approach here. Thanks
Describe it simply:
When the project have local font file (.woff) and (.css), snapdom not able to get the font and render the font in the generated canvas. The browser still render correctly the original dom. But the canvas generated by snapdom doesnt.
Quick demo to reproduce
Sorry I've been trying codesandbox and stackblitz.com but not able to provide a working demo because their webpack config also doesnt work with local font files in src. So the original dom not even able to render the font so it doesnt really replicate the original issue.
But you can just download some local icon font (woff and css) to src and setup your webpack to be able to bundle and load local font. For example:
./font.css
./app.js
Then you can see that the browser able to render the font, but the generated canvas doesnt.
Anything else we should know?
The library html-to-image also have the same issue, however, they provide an option call fontEmbedCSS
Check their doc here : https://github.com/bubkoo/html-to-image?tab=readme-ov-file#fontembedcss
Initially html-to-image doesnt work, but after i have this config, then it works. Even though im not sure if they have it to solve this issue, but adding the config resolve it
It would be great if snapdom also can consider their approach here. Thanks