title: How to use self-hosted fonts face using NextJS?
body: <h1>Fonts using NextJS</h1>
  
  <p>I have read different topics about how to use self-hosted fonts with NextJS. </p>
  
  <p>What I got <code>[ wait ]  compiling ...</code> when I did:</p>
  
  <pre><code>@font-face {
      font-family: 'montserrat';
      src: url('./mypath/Montserrat-Medium.woff2') format('woff2'),
          url('./mypath/Montserrat-Medium.woff') format('woff'),
          url('./mypath/Montserrat-Medium.ttf') format('truetype'),
          url('./mypath/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
  }
  </code></pre>
  
  <p>No error, or else just compiling... I've read ( <a href="https://stackoverflow.com/questions/57590195/nextjs-self-hosted-fonts-loading">stackoverflow/57590195</a>) which says we should use a static path like </p>
  
  <pre><code>@font-face {
      font-family: 'font';
      src: url('./static/fonts/Montserrat-Medium.woff2') format('woff2');
  }
  </code></pre>
  
  <p>but that solution does not work at all. It almost seems to work fine, because the error (or the compelling waiting) stops. 
  But if you look closer your font is not loaded.</p>
  
  <p>Then I tried fontfaceobserver, I understood quickly that the problem would be the same. Because you have to use <code>font-face</code> and you cannot use it with NextJS.</p>
  
  <p>After I downloaded next-font I have read the doc and looked at <a href="https://github.com/rohanray/next-fonts-example" rel="noreferrer">the github exemples</a>. </p>
  
  <p>Here is my <code>next.config.js</code> inspired of theirs.</p>
  
  <pre><code>const withSass = require('@zeit/next-sass');
  const withCSS = require("@zeit/next-css");
  const withFonts = require('next-fonts');
  
  module.exports = withFonts(
      withCSS(
          withSass({
              enableSvg: true,
              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>
  
  <p>My path to fonts <code>public/static/fonts</code>.</p>
  
  <p>And here is how I tried to use it.</p>
  
  <pre><code>...
  function MainIndex() {
      ...
      return (
          &lt;&gt;
          ...
          &lt;style jsx&gt;{`
                  @font-face {
                      font-family: 'Montserrat';
                      src: url('./static/fonts/Montserrat-Medium.ttf');
                  }
                  h1 {
                      font-family: 'Montserrat';
                  }
          `}&lt;/style&gt;
          &lt;/&gt;
      )
  }
  ...
  </code></pre>
  
  <p><strong>Solutions I found</strong></p>
  
  <ul>
  <li>✗  <a href="https://github.com/bramstein/fontfaceobserver" rel="noreferrer">https://github.com/bramstein/fontfaceobserver</a>  456 KB</li>
  <li>✗ <a href="https://github.com/rohanray/next-fonts" rel="noreferrer">https://github.com/rohanray/next-fonts</a>  1.89 MB</li>
  <li>? The <code>dangerouslySetInnerHTML</code> could work but it's not the best
  solution I guess. (I didn't try it)</li>
  <li>✗ url('./static/fonts/font.woff2')</li>
  </ul>
  
  <p><a href="https://github.com/zeit/next.js/issues/512" rel="noreferrer">Read more one the github issue</a></p>
  
  <p>EDIT: </p>
  
  <p>I tried to adapt what <a href="https://stackoverflow.com/users/2846463/jesper-we">Jesper We</a> <a href="https://stackoverflow.com/a/61913799/7942242">did</a>. </p>
  
  <p>I have created <code>/public/static/fonts/fonts.css</code> and <code>/public/fonts/allMyfont.ttf</code> then I imported in _var.scss to use it with sass variable @import "/public/static/fonts/fonts.css"; import style.scss my var $font and import "my/path/style.scss" to my index.js (compling for ever)</p>
  
  <p>After I tried a closer way still <code>/public/static/fonts/fonts.css</code> with my fonts in the same folder. Then     in my index.js. But that one does nothing. </p>
  
  <p>Here the code in live <a href="https://codesandbox.io/s/github/Florian-crg/byflo" rel="noreferrer">CodeSandBox</a></p>