When using the font family to render text in SVG, Chrome 32.0.1700.107 will select the appropriate font. But if I use the same SVG as the input for the img element, the wrong font is used. If I specify a specific font, which, as I know, is on my system, then the font is displayed correctly in both svg and img elements. A simple example:
<svg id="scalingSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<rect width="99%" height="99%" fill="white" stroke="black"/>
<text id="myText" x="50%" y="50%" font-family = "monospace" font-size = "24">M~</text>
</svg>
<img id="svgImage" x="0" y="0" height="100" width="100"/>
var xml = (new XMLSerializer).serializeToString(svg);
img.src = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(xml);
Here it is on jsfiddle . The drop-down list contains generic font families as well as special fonts. In particular, if you install the Courier New drop-down list, the result will be what I expect - the font will display correctly on both images. But if you change the font to "monospace", the SVG element will correctly find Courier New, and the img element will appear in the incorrect non-monospace font.
IE, Firefox and Safari work as I expected - a suitable font is found for the font family in both the svg and img elements. I found a bug in Chrome, or is there subtlety in defining fonts that I just don't get?