How do you get an SVG Font to work in IE 8?
Here I have a single glyph defined and it displays perfectly in all browsers I’ve tried except for IE8 (link to source):
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" id="Layer_1" enable-background="new 0 0 542 324" space="preserve" viewBox="0 0 542 324" version="1.1" y="0px" x="0px">
<defs>
<font id="PlainBlackNormal" horiz-adv-x="199">
<glyph unicode="!" horiz-adv-x="253" d="M232 798q0 -24 -8 -62t-18 -78t-19.5 -74t-12.5 -50l-5 -25q-3 -11 -5.5 -25t-4 -33t-1.5 -47q0 -33 5 -56l7 -36q2 -13 -0.5 -19t-16.5 -6q-11 0 -23.5 22.5t-24 56t-20 74t-11.5 76.5l20 170q-1 17 -5 37t-11 35t-17.5 21.5t-24.5 -4.5h-16q0 3 -2.5 5t-2.5 5 q0 5 26.5 21t62.5 42q1 0 14 10l28 23q15 13 30 23.5t21 10.5q12 0 23.5 -29t11.5 -88zM238 119q0 -12 -24.5 -37t-59.5 -70q-4 3 -18 16t-29.5 29.5t-27.5 33t-12 26.5q0 3 11.5 19t26.5 34l27 31q12 14 15 14q1 0 15.5 -13.5t31.5 -31t30.5 -33t13.5 -18.5z"></glyph>
<font-face font-family="PlainBlackNormal" units-per-em="1000" ascent="1000" descent="-200"></font-face>
</font>
</defs>
<text id="one" font-size="84.06" space="preserve" transform="matrix(1 0 0 1 47.276 67.043)" font-family="PlainBlackNormal" fill="#000" color="#000">!</text>
</svg>
</body>
What am I doing wrong that would prevent the above from working in IE8?
Since IE8 doesn’t have SVG support, it also doesn’t support SVG fonts.