4 ms·
In particular: if you load an SVG in Chrome via an img tag, the webfont is not run because the environment tries to execute as little as possible. It'll instead
by morley 4y ago
In particular: if you load an SVG in Chrome via an img tag, the webfont is not run because the environment tries to execute as little as possible. It'll instead use whatever fallback font is present on the system.
Source: I just dealt with this problem a few weeks ago. I also spent all last week implementing a custom OG image in Canvas. Wish Satori had come out a week earlier!
- aidos 4y agoThat didn't sound right to me, and I've just checked that the fonts are loading for me. I wonder if you were embedding them in a way that didn't work? EDIT: here's how I'm doing the embedding <style type="text/css"> @font-face { font-family:FontName; src:url(data:font/otf;base64,T1RUTwAOAIAAAwBgQ0ZGIHKc...AAAAAAAAAAAA=) format("opentype"); } </style> I've passed by the Chrome SVG code a bit, and I've never seen anything to suggest there's an "SVG lite" type version in there. I imagine it's just painted to a bitmap and handed to the compositor like everything else (obviously a massive simplification).
- eyelidlessness 4y agoI think you can safely embed data URLs because they’re known to be static. What you can’t generally do is trigger a network waterfall or dynamic evaluation from an img tag’s SVG resource.
- aidos 4y agoGotcha. When thinking of embedded fonts, my mind goes straight to totally embedded with data-uris (which would have worked around OPs issue above).