html - Cross-browser embedded font in svg image

Question

The title is ambiguous; let me clarify: I have an svg image which includes a text I want rendered with a custom font.

However, there seem to be new issues that do not pop up when embedding fonts in html page. Also, some browsers (namely Firefox) seem to treat in-page svg ("in a img tag") differently than when rendering the svg directly.

<defs>
<style>
    @font-face {
        font-family: "Open Sans";
        src: local("Open Sans"),
            local("OpenSans"),
            url('https://example.com/OpenSans-Regular.eot') format('eot'),
            url('https://example.com/OpenSans-Regular.woff') format('woff'),
            url('https://example.com/OpenSans-Regular.ttf') format('truetype');
    }
    /* ...

As far as I know, if this was a web page it would render successfully across pretty much everywhere. However, as an svg, I can't get it to work. The current format works pretty much everywhere except in IE10 (and presumably older versions): the font sometimes loads, other time it doesn't. Literally every second refresh uses the system fallback font. Including the woff file inline as a base64 encoded file works, but that breaks it for Safari (and changing order does not fix it).

Is there a solid way of cross browser embedded fonts in svg image? (Again, I don't mean embedding svg font in a web page, but rendering embedded font inside an svg image.)

question from:https://stackoverflow.com/questions/65835482/svg-not-loading-correctly

Answer 1

In Firefox at least, images must be completely self-contained i.e. everything in one file for privacy reasons.

If you want the fonts to work you'll have to base64 encode them and embed them as a data URLs in the SVG file i.e.

@font-face {
    font-family: 'Open Sans';
    src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}