The webfonts don't work if referenced via @font-face / new FontFace()

[stevobm]

What's this about?

• I found a bug
• I have a feature idea

Describe it simply:

The webfonts don't work well in snapshot.

Original:

Snapshot:

Quick demo?

The font is added with the following method:

const myFont = new FontFace('My Font', 'url(https://xxx/font.woff2)');
document.fonts.add(customFont)

Anything else we should know?

[tinchox5]

Thank you, have you tried to add embedFonts: true as option?

[stevobm]

Thank you, have you tried to add embedFonts: true as option?

Already.

[tinchox5]

Working now?

[tinchox5]

The font is added with the following method:

const myFont = new FontFace('My Font', 'url(https://xxx/font.woff2)');
document.fonts.add(customFont)

Ok, sorry I didnt see this. Working on that

[tinchox5]

@stevobm Ok, I made this https://codepen.io/zircle/pen/VYLGOwp to confirm snapDOM is not detecting webFonts via fontFace. I working to solve this caveat. In the meantime, you can try by referencing the fonts in a <link> tag.

[tinchox5]

Ok, it's done. Now snapDOM captures the @font-face CSS rule (prefered way). Also capures webfonts added by JS FontFace, but user have to add the _snapdomSrc property to font because the FontFace object doesn't expose the src. This is the only way I'm afraid.

const mansalva = new FontFace(
  'Mansalva',
  'url(https://cdn.jsdelivr.net/npm/@fontsource/mansalva/files/mansalva-latin-400-normal.woff2)'
);

mansalva._snapdomSrc = "https://cdn.jsdelivr.net/npm/@fontsource/mansalva/files/mansalva-latin-400-normal.woff2";

mansalva.load().then(async (loadedFont) => {
document.fonts.add(loadedFont);
document.body.style.fontFamily = 'Mansalva, cursive';
  
const el = document.querySelector('body');
const png = await snapdom.toImg(el, { embedFonts: true });
document.body.appendChild(png);
});

This features will be release soon, maybe today.

[tinchox5]

You can check the working example at https://codepen.io/zircle/pen/VYLGOwp