title: In CSS/SVG, ligature font doesn't work in `<text>` nodes?
body: <p>Here is a Demo at JsFiddle:</p>
  
  <p><a href="http://jsfiddle.net/d0t3yggb/" rel="nofollow noreferrer">http://jsfiddle.net/d0t3yggb/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;div class="material-icons"&gt;add add add add&lt;/div&gt;
  &lt;svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;defs&gt;
          &lt;path id="MyPath" d="M 100 200 
               C 200 100 300   0 400 100
               C 500 200 600 300 700 200
               C 800 100 900 100 900 100" /&gt;
      &lt;/defs&gt;
      &lt;use xlink:href="#MyPath" fill="none" stroke="red" /&gt;
      &lt;text class="material-icons"&gt;
          &lt;textPath xlink:href="#MyPath"&gt;add add add add&lt;/textPath&gt;
      &lt;/text&gt;
      &lt;!-- Show outline of the viewport using 'rect' element --&gt;
      &lt;rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here I used the <code>'Material Icons'</code> font, which can convert letter combinations "add" into one character (ligature, explained <a href="https://stackoverflow.com/questions/31089700/in-css-javascript-how-is-this-icon-font-plugin-implemented#31089700">here</a>), which looks like below:</p>
  
  <p><img src="https://i.stack.imgur.com/RmiAQ.png" alt="enter image description here"> </p>
  
  <p>I used <code>class="material-icons"</code> to set the <code>font-family</code>. This works well for the <code>&lt;div&gt;</code> node, as can be seen in the Demo above. </p>
  
  <p>But it doesn't work for the <code>&lt;text&gt;</code> node within <code>&lt;svg&gt;</code>, the text/characters don't appear at all..</p>
  
  <p>If I remove the <code>class="material-icons"</code> attribute from <code>&lt;text&gt;</code> node, the text appears:</p>
  
  <p><img src="https://i.stack.imgur.com/W6Ylf.png" alt="enter image description here"></p>
  
  <p>but it is not the "'Material Icons'" font...</p>
  
  <p>Does anyone have ideas about this?</p>