Cross-browser embedded font in svg image

fonts, html, svg

Solution

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]");
}

Problem

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

Original source