title: Self-hosted fonts using NextJS
body: <p>I'm trying to self-host webfonts using my NextJS app and having trouble.
  This is the URL browser tries to access these fonts:</p>
  <pre><code>localhost:3000/_next/static/css/fonts/Avenir.woff2
  </code></pre>
  <p>The actual path is:</p>
  <pre><code>_project_dir/static/fonts/Avenir.woff2
  </code></pre>
  <p>I tried including the link in the the _app.js, it does download the fonts, but the text remains unstyled.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;link rel=&quot;preload&quot; as=&quot;font&quot; href=&quot;/static/fonts/Avenir.woff2&quot; type=&quot;font/woff2&quot; crossorigin /&gt;
  </code></pre>
  <p>Here's my <code>_app.js</code>:</p>
  <pre><code>
    render() {
      const { Component, pageProps } = this.props;
      return (
        &lt;Container&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/css?family=Poppins:500,500i,600&amp;display=swap&quot; rel=&quot;stylesheet&quot; /&gt;
          &lt;link rel=&quot;preload&quot; as=&quot;font&quot; href=&quot;/static/fonts/Avenir.woff2&quot; type=&quot;font/woff2&quot; crossorigin /&gt;
          &lt;link rel=&quot;preload&quot; as=&quot;font&quot; href=&quot;/static/fonts/AvenirHeavy.woff2&quot; type=&quot;font/woff2&quot; crossorigin /&gt;
          &lt;Head&gt;
            &lt;title&gt;Project&lt;/title&gt;
          &lt;/Head&gt;
          &lt;Provider store={store}&gt;
            &lt;PersistGate loading={null} persistor={persistor}&gt;
              &lt;Component pageContext={this.pageContext} {...pageProps} /&gt;
            &lt;/PersistGate&gt;
          &lt;/Provider&gt;
        &lt;/Container&gt;
      );
    }
  }
  </code></pre>
  <p>My <code>main.css</code></p>
  <pre class="lang-css prettyprint-override"><code>@font-face {
    font-family: 'Avenir';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('fonts/Avenir.eot');
    src: url('fonts/Avenir.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir.woff2') format('woff2'),
      url('fonts/Avenir.woff') format('woff'), url('fonts/Avenir.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Avenir';
    font-weight: 500;
    src: url('fonts/Avenir.eot');
    src: url('fonts/Avenir.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir.woff2') format('woff2'),
      url('fonts/Avenir.woff') format('woff'), url('fonts/Avenir.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Avenir';
    font-weight: 900;
    src: url('fonts/AvenirHeavy.eot');
    src: url('fonts/AvenirHeavy.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirHeavy.woff2') format('woff2'),
      url('fonts/AvenirHeavy.woff') format('woff'), url('fonts/AvenirHeavy.ttf') format('truetype');
  }
  
  </code></pre>
  <p>And my <code>next.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>  webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
          },
        },
      });
      return config;
    },
  
  </code></pre>