title: Custom font not displaying in SVG pattern used as background-image
body: <p>I'm working with <strong>an SVG pattern that uses a custom font</strong>, so as to use that <strong>pattern as a background image</strong> on an HTML page.</p>
  
  <p>Everything renders fine in Chrome and Safari but it starts to get funny in Firefox:</p>
  
  <ul>
  <li>Firefox renders the SVG along with the custom font text just fine when I open the SVG file itself (so far so good!);</li>
  <li>However, Firefox does <strong>NOT</strong> render the custom font anymore when that same SVG file is used as the background to an HTML element (!)</li>
  </ul>
  
  <p>I've spent hours trying to isolate the issue and a fresh pair of eyes would be welcome.</p>
  
  <p>Here's what I've got in short:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
  
  body {
      background: url(pattern-google.svg);
  }
  </code></pre>
  
  <p><strong>SVG file:</strong></p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200"&gt;
      &lt;style type="text/css"&gt;@import url(http://fonts.googleapis.com/css?family=Indie+Flower);&lt;/style&gt;
      &lt;defs&gt;
          &lt;!-- Geometry --&gt;
          &lt;g&gt;
              &lt;rect id="square" x="0" y="0" width="200" height="200" /&gt;
          &lt;/g&gt;
  
          &lt;!-- Patterns with Text --&gt;
          &lt;pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" text-anchor="middle" font-size="20" font-family="Indie Flower, sans-serif" style="font-family: Indie Flower, sans-serif;"&gt;
              &lt;rect x="00" y="00" width="40" height="40" fill="transparent" /&gt;
              &lt;text x="00" y="00" fill="#777"&gt;S&lt;/text&gt;
              &lt;text x="40" y="00" fill="#777"&gt;S&lt;/text&gt;
              &lt;text x="20" y="20" fill="#777"&gt;S&lt;/text&gt;
              &lt;text x="00" y="40" fill="#777"&gt;S&lt;/text&gt;
              &lt;text x="40" y="40" fill="#777"&gt;S&lt;/text&gt;
          &lt;/pattern&gt;
      &lt;/defs&gt;
  
      &lt;!-- Graphics --&gt;
      &lt;use xlink:href="#square" transform="translate(0, 0)" fill="url(#pattern)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The HTML itself does not really matter but I've linked it below.
  I did not produce a jsfiddle in the end because I could not host the SVG file there.</p>
  
  <p>(Outside of the demo, the real-world application here is that I want to use a custom font to display phonetic symbols. (As background image, to help people learn them.) Doing so in SVG saves me the hassle to export to bitmap anytime I make a change in design.)</p>