Hacker News Reader

Comment by alixanderwang | Hacker News Reader

You can embed fonts in SVG:

https://oreillymedia.github.io/Using_SVG/extras/ch07-dataURI....

In my experience, embedded fonts are handled very inconsistently (and often poorly) by different rendering engines.

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!

That 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).

I 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.

Gotcha. When thinking of embedded fonts, my mind goes straight to totally embedded with data-uris (which would have worked around OPs issue above).

Reply on news.ycombinator.com