Web fonts support

[fand]

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:

• Web fonts tend to be large (especially in CJK languages)
  • DataURL conversion & loading will be too heavy to be used in real world
• We have to "hoist" font-family styles in the DOM tree and insert @font-family to the SVG

I think it's worth a try, but it might be a tough problem to solve.