How to add font family to svg being used within <img>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="300px" height="300px" viewBox="0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"&gt;
        &lt;style type="text/css"&gt;
            /* SVG Style */
            @font-face {font-family: "Bebas";
              src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot"); /* IE9*/
              src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff2") format("woff2"), /* chrome、firefox */
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff") format("woff"), /* chrome、firefox */
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
              url("../fonts/7bea0c92e559e23f9bd920d83612b1db.svg#Century Gothic Bold V1") format("svg"); /* iOS 4.1- */
            }
    .text{
          font-family: 'Bebas' !important;
        }
        &lt;/style&gt;
        &lt;text class="text" id="S" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00"&gt;
                    &lt;tspan x="100" y="100"&gt;S&lt;/tspan&gt;
                &lt;/text&gt;
                &lt;text class="text" id="S-Copy" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00"&gt;
                    &lt;tspan x="100" y="150"&gt;S&lt;/tspan&gt;
                &lt;/text&gt;&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>I have an svg with embedded styles and I am using it on my main page as </p>

<p><code>&lt;img src="images/test.svg" onerror="this.onerror=null; this.src='images/test.png'"&gt;</code></p>

<p>SVG:</p>

<pre><code>&lt;svg width="300px" height="300px" viewBox="0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"&gt;
    &lt;style type="text/css"&gt;
        /* SVG Style */
        @font-face {font-family: "Bebas";
          src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot"); /* IE9*/
          src: url("../fonts/7bea0c92e559e23f9bd920d83612b1db.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff2") format("woff2"), /* chrome、firefox */
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.woff") format("woff"), /* chrome、firefox */
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
          url("../fonts/7bea0c92e559e23f9bd920d83612b1db.svg#Century Gothic Bold V1") format("svg"); /* iOS 4.1- */
        }
.text{
      font-family: 'Bebas' !important;
    }
    &lt;/style&gt;
    &lt;text class="text" id="S" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00"&gt;
                &lt;tspan x="100" y="100"&gt;S&lt;/tspan&gt;
            &lt;/text&gt;
            &lt;text class="text" id="S-Copy" sketch:type="MSTextLayer" font-size="100" font-weight="bold" fill="#FF4B00"&gt;
                &lt;tspan x="100" y="150"&gt;S&lt;/tspan&gt;
            &lt;/text&gt;&lt;/svg&gt;
</code></pre>

<p>I am using <code>font-family: "Bebas"</code> on <code>.text</code>.</p>

<p>Everything works fine when I access the image as <code>http://localhost/test/images/test.svg</code></p>

<p>But when it is accessed on the main page i.e on <code>http://localhost/test/index.php</code>, the font style is not applied.</p>

<p>I also referred <a href="https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/" rel="nofollow">this article</a> for the scope of css styling in svg.</p>

<p>How can I make it work on my main page?</p>