Skip to content

Feat. try to embed local font #146

Description

@ngoctuan001

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

import "./font.css";

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔧 in developmentThis issue is being actively worked on

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions