title: Why is my woff that’s declared in my JSS stylesheet with @font-face not loading?
body: <p>Why isn’t my @font-face rule loading the woff? My <code>createStyleSheet()</code>:</p>
  
  <p>Setup outside of my React component:</p>
  
  <pre><code>// ./jss.css
  import jss from 'jss';
  import vendorPrefixer from 'jss-vendor-prefixer';
  
  
  /**
   * Reformat classNames
   * mechanism and format the classes as we see fit.
   *
   * @method createGenerateId
   * @return {String}         Formatted class name
   */
  const createGenerateId = () =&gt; (rule) =&gt; {
      return rule.key.toString().replace(/\./, '_DOT_');
  };
  
  
  export default jss
      .use(vendorPrefixer())
      .setup({ createGenerateId });
  
  </code></pre>
  
  <p>Then inside:</p>
  
  <pre><code>import jss from './jss';
  </code></pre>
  
  <pre><code>componentDidMount() {
          this.sheet = jss.createStyleSheet({
              '@font-face': {
                  fontFamily: 'Whitney-BlackItal-ProGkCy-TDA',
                  src: 'url(/fonts/woff/Whitney-BlackItal-ProGkCy-TD.woff)',
                  fontWeight: 'normal',
                  fontStyle: 'normal'
              }
          }).attach();
      }
  </code></pre>
  
  <p>The URL for the woff is good. If I hit that URL the browser downloads the .woff file. When I inspect the <code>this.sheet</code> instance I see the rule there. </p>
  
  <p>My CSS class is formatted correctly:</p>
  
  <pre class="lang-css prettyprint-override"><code>.font__Whitney--423 {
      font-family: Whitney-BlackItal-ProGkCy-TDB, Whitney-BlackItal-ProGkCy-TDA, Fallback, Courier;
      font-weight: "normal";
  }
  </code></pre>
  
  <p>Nothing I’ve tried will actually load the woff file and display the styled text on screen.</p>
  
  <p>What am I missing here?</p>