Uisng web fonts in an SVG texture

Trying to use the “Inter” font in an SVG applied as a texture to a mesh. Since the Inter font is not installed by default, it needs to be imported via an @import tag in the svg style. This works when viewing the SVG standalone in a browser, but doesn’t seem to work when the SVG is used as a texture as can be seen in this PG (Babylon.js Playground) In this case, I am not able to use a Dynamic texture because I need the texture to be loaded from a url (an svg base64 data url in this case). I tried adding the font to the head of the webpage, but it still failed. Is there a way to tell BJS to load the fonts so they resolve when the SVG is converted to an image?

There are restrictions on use of external resources, like fonts, in standalone embedded SVGs. I couldn’t find an authoritative reference about it, but if you google about using web fonts in SVGs with data URIs you’ll find a number of discussions about it on StackOverflow, etc.

Here is your PG, modified to load the font face as a base64 data URI in svg2:

I encoded it manually and there might be some legal/license concerns around this. (I didn’t check.)

I believe it would also be possible to do it dynamically in the browser. For example:

Although not the main issue, the reason your original PG showed checkeredd image (error), is because SVG contents must be XML encoded. The @import URL has & characters, etc. You could/should wrap that style section with CDATA. After doing that, no errors, but the font was still not used.

Thanks for the solution. Although I wonder if including a copy of the font in every texture will have memory impacts if I have alot of textures. In my case, each of these svg textures are dynamically generated and I can have a few hundred of them. @Deltakosh Do you or the team know if BJS will somehow cache the font embedded in an SVG texture so that multiple copies of the font will not be loaded if multiple SVG textures include the font? Or does it not even matter because the SVG would be converted to a bitmap anyway and the original SVG would be discarded?