Cross-browser Embedded Font In Svg Image

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 e

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

Solution 2:

I ended up using this:

<defs>
<style type="text/css">
<![CDATA[
    @font-face {
        font-family: "Open Sans";
        src: local("Open Sans"), /* IE */local("OpenSans"),
            url("data:application/vnd.ms-fontobject;charset=utf-8;base64,{$fontEot}") format('embedded-opentype'),
            url("data:application/x-font-woff;charset=utf-8;base64,{$fontWoff}") format('woff'),
            url('https://example.com/OpenSans-Regular.ttf') format('truetype');
    }
]]>
</style>

Support:

+------------+--------+-------+-------+-----------+||WinXP|Win7|iOS6|OSX10.9|+------------+--------+-------+-------+-----------+|IE8|no|no||||IE9||yes||||IE10||yes||||IE11||yes||||Safari4||yes||||Safari5.0||yes||||Safari5.1||no||||Safari7||no||yes||SafariiOS|||yes|||FF3.6|no|no||||FF4|yes|yes||||FF27|yes|yes||yes||Chrome14|yes|yes||||Chrome33|yes|yes||yes||Opera10.6|yes|yes||||Opera19|yes||||+------------+--------+-------+-------+-----------+

Per http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201310-201312-bar this amounts for overall support of somewhere around 85 %.

The only really bothering thing is that Safari 5.1 renders NO text at all like this. I had to make a Safari only fallback in the css declaration:

/* Win Safari fallback */@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari only */
    ::i-block-chrome,text {
        font-family: 'Verdana';
    }
}

Anyway, embedding the font just feels wrong as the files are huge.