title: ReactJS - inline SVG styling and Google Fonts
body: <p>I previously made a post here: <a href="https://stackoverflow.com/questions/41578124/converting-svg-to-png-loses-styling-elements">Converting SVG to PNG loses styling elements</a> but my question was more broad - I think we identified the cause, but now I'm having issues implementing a solution. </p>
  
  <p>I thought it would be beneficial to post a new question regarding specific React syntax to provide an inline custom font style to an SVG element</p>
  
  <p>Here are my render() functions:</p>
  
  <pre><code>renderIcon() {
      return this.props.logoStyle.iconGraphic.path.map((path) =&gt; {
          return (
              &lt;path id={path.id} style={{"fill":this.props.logoStyle.iconColor}} d={path.d} /&gt;
          );
      });
  }
  
  renderLogo() {
      let style = this.props.logoStyle;
  
      return (
          &lt;svg width="300" height="100" className={"logo"} xmlns="http://www.w3.org/2000/svg"&gt;
  
              &lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
                      &lt;rect 
                          id="background" 
                          x="0" 
                          y="0" 
                          width="300" 
                          height="100" 
                          style={{fill: style.backgroundColor}} 
                           /&gt; 
              &lt;/svg&gt;
              &lt;svg
               xmlns="http://www.w3.org/2000/svg"
               width={style.iconSize}
               height={style.iconSize}
               viewBox="0 0 1000 1000"
                  x="10"
                  y="13"
               id="svg4272"&gt;
              &lt;g&gt;
                  {this.renderIcon()}
              &lt;/g&gt;
               &lt;/svg&gt;
               &lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
                      &lt;text 
                          style={{
                              fontSize:style.fontSize,
                              fontFamily: style.fontFamily,
                              fill: style.fontColor
                          }}
                          id="text"
                          x="90" 
                          y="58" 
                          fontSize={style.fontSize}
                          &gt;{style.companyName}&lt;/text&gt;
              &lt;/svg&gt;
          &lt;/svg&gt;
      );
  }
  
  render() {
      let style = this.props.logoStyle;
      //console.log(style);
  
  
  
      return (
          &lt;div className="logo-preview"&gt;
              {this.renderLogo()}
  
              &lt;canvas id="canvas" width="900" height="300"&gt;&lt;/canvas&gt;  
              &lt;button className="btn btn-success" onClick={this.onDownload}&gt;Download&lt;/button&gt;
  
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Everything looks good on the page, but when the user presses a button which then draws the SVG to the #canvas and triggers a download, it's clear that it loses styling elements, as they are not truly being rendered inline. </p>
  
  <p>The icon (from this.renderIcon()) is the only thing that gets drawn correctly.</p>
  
  <p>The <code>&lt;rect&gt;</code> gets stripped entirely (or at least loses its fill), and the <code>&lt;text&gt;</code> loses it's custom fonts (but correctly maintains fontSize and fill). </p>
  
  <p>Speaking specifically to the custom fonts, I have found from various resources that I need to encode the font to data URI, and include that in line:
  Import: <a href="https://stackoverflow.com/questions/36253961/using-google-fonts-with-svg-object">Using Google Fonts with SVG &lt;object&gt;</a> 
  dataURI: <a href="https://stackoverflow.com/questions/41571622/how-to-include-css-style-when-converting-svg-to-png">How to Include CSS style when converting svg to png</a> </p>
  
  <p>I've tried the following, but nothing has worked:</p>
  
  <p><strong>@font-face</strong></p>
  
  <pre><code> &lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;style&gt;
          @font-face { font-family: 'pacifico'; src: url(data:application/font-woff;charset-utf08;base64,d09GR...) format('woff'); font-weight: normal; font-style: normal; }
      &lt;/style&gt;
                  &lt;text 
                      style={{
                          fontSize:style.fontSize,
                          fontFamily: style.fontFamily,
                          fill: style.fontColor
                      }}
                      id="text"
                      x="90" 
                      y="58" 
                      fontSize={style.fontSize}
                      &gt;{style.companyName}&lt;/text&gt;
          &lt;/svg&gt;
  </code></pre>
  
  <p><strong>@fontFace</strong> (camelCase for React)</p>
  
  <pre><code> &lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;style&gt;
          @fontFace { fontFamily: 'pacifico'; src: url(data:application/font-woff;charset-utf08;base64,d09GR...) format('woff'); fontWeight: normal; fontStyle: normal; }
      &lt;/style&gt;
                  &lt;text 
                      style={{
                          fontSize:style.fontSize,
                          fontFamily: style.fontFamily,
                          fill: style.fontColor
                      }}
                      id="text"
                      x="90" 
                      y="58" 
                      fontSize={style.fontSize}
                      &gt;{style.companyName}&lt;/text&gt;
          &lt;/svg&gt;
  </code></pre>
  
  <p>This one throws a webpack error at 'fontFamily: ...' citing the colon ':' as an unexpected character, expecting a closing bracket '}'</p>
  
  <p><strong>@import</strong></p>
  
  <pre><code> &lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;style&gt;
          @import url('https://fonts.googleapis.com/css?family=Pacifico');
      &lt;/style&gt;
                  &lt;text 
                      style={{
                          fontSize:style.fontSize,
                          fontFamily: style.fontFamily,
                          fill: style.fontColor
                      }}
                      id="text"
                      x="90" 
                      y="58" 
                      fontSize={style.fontSize}
                      &gt;{style.companyName}&lt;/text&gt;
          &lt;/svg&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>I came across this thread that used backticks: <a href="https://stackoverflow.com/questions/23402542/embedding-svg-into-reactjs">Embedding SVG into ReactJS</a> 
  And tried this, but still did not work (tried with both camelCase and traditional syntax)</p>
  
  <pre><code>&lt;style&gt;
      { `@fontFace { fontFamily: 'pacifico'; src: url(data:application/font-woff2;charset=utf-8;base64,....; } ` }
  &lt;/style&gt;
  </code></pre>
  
  <p>It does not throw any errors but when drawn to canvas it is no different than before</p>