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 no

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