VFX-JS / REACT-VFX doesn't support Web fonts yet.
In short, it's possible to support web fonts theoretically, but it doesn't work pretty well in real usecases.
VFXDiv, VFXSpan etc are implemented using SVG's foreignObject feature.
It allows us to render HTML elements to a canvas, however it requires that all resources MUST be contained in the SVG string (= no external resources are allowed).
https://x.com/yuneco/status/1801226318492868848
VFX-JS / REACT-VFX doesn't support Web fonts yet. In short, it's possible to support web fonts theoretically, but it doesn't work pretty well in real usecases.
VFXDiv, VFXSpan etc are implemented using SVG's foreignObject feature. It allows us to render HTML elements to a canvas, however it requires that all resources MUST be contained in the SVG string (= no external resources are allowed).
We already support images in VFXDiv. It was implemented by converting image data to DataURL at runtime. https://github.com/fand/react-vfx/blob/23826f0de47f8bfac7977c8a5feb77aa57f6cc8d/packages/vfx-js/src/dom-to-canvas.ts#L101-L107
This StackOverflow topic shows that we can do the same trick for the fonts: https://stackoverflow.com/questions/66957081/having-trouble-rendering-a-custom-external-font-within-a-foreignobjects-html-of
However, there are some problems:
@font-familyto the SVGI think it's worth a try, but it might be a tough problem to solve.