title: Custom font in Next.js + Tailwind: no error, but wrong font
body: <p>In my Next.js (9.4.4) / Tailwind.css (1.4.6) project, I'm using a custom font called SpaceGrotesk. To make it work, I put my fonts my <code>public/fonts/spaceGrotesk</code>, and then, I configured my files as follows:</p>
  <pre class="lang-js prettyprint-override"><code>// next.config.js
  module.exports = {
      cssModules: true,
      webpack: (config, options) =&gt; {
          config.node = {
              fs: &quot;empty&quot;,
          };
          config.module.rules.push({
              test: /\.(png|woff|woff2|eot|ttf|svg)$/,
              use: [
                  options.defaultLoaders.babel,
                  {
                      loader: &quot;url-loader?limit=100000&quot;,
                  },
                  {
                      loader: &quot;file-loader&quot;,
                  },
              ],
          });
          return config;
      },
  };
  
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>/** tailwind.css */
  @tailwind base;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @font-face {
      font-family: SpaceGrotesk;
      font-weight: 400;
      font-display: auto;
      src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format(&quot;woff&quot;);
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// tailwind.config.js
  module.exports = {
      purge: {
          mode: &quot;all&quot;,
          content: [
              &quot;./components/**/*.js&quot;,
              &quot;./Layout/**/*.js&quot;,
              &quot;./pages/**/*.js&quot;
          ],
      },
  
      important: true,
      theme: {
          extend: {
              fontFamily: {
                  paragraph: [&quot;Crimson Text, serif&quot;],
                  spaceGrotesk: [&quot;SpaceGrotesk, sans-serif&quot;],
              },
          },
      },
  };
  
  </code></pre>
  <p>I used to have a lot of trouble with import errors displayed on the console, but fixed them all. Now, however, I still don't get the right fonts. The console shows no warning, the inspector seems to say that the font is loaded correctly, but the back-up font (sans-serif) is still used instead of SpaceGrotesk.</p>
  <p>What did I do wrong to import my font?</p>