[Bug]: collectFonts doesn't work

[econte-sprig]

Preflight Checklist

• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

2.0.0-alpha.6

Expected Behavior

collectFonts when enabled will lead to replays serializing fonts and reproducing them

Actual Behavior

collectFonts seems to do nothing. I don't see any IncrementalSource.Font events being emitted, and replays do not correctly render custom fonts.

Steps to Reproduce

I just set up a simple web app with the following custom font definition @font-face { font-family: myCustomFont; src: url('myCustomFont.ttf'); } Insert whatever font you want there, it will not be rendered when viewing replays, it will just use a fallback font.

Testcase Gist URL

No response

Additional Information

Looking at the code when building rrweb locally, in observer.ts I don't see the custom FontFace constructor ever being called, and neither is fontCb.

It just seems like the collectFonts setting doesn't work at all. In what situations is it supposed to work? Am I using it incorrectly? Is it not supposed to do what I think it is supposed to do?

[sdwvit]

Can confirm I am seeing the same issue. Reading the code leads me to an idea that either Fonts Web Api was misunderstood, or RRweb Readme should be clearer. Rrweb code assumes that if you call fontface api like this:

//Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
});

Then you get your embedded fonts. But the code above is never called on client website, because there is no point if css font loading with url works fine for them.