title: How to load otf and ttf font face in next js
body: <p>trying to load ttf font face in nextjs application.added next-font and configured next.config.js file.
  but its throwing below error</p>
  
  <pre><code>ModuleParseError: Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 
  </code></pre>
  
  <p>this is my next.config.js</p>
  
  <pre><code>const webpack = require("webpack");
  const withCss = require("@zeit/next-css");
  const withSass = require("@zeit/next-sass");
  const withFonts = require("next-fonts");
  require("dotenv").config({
    path: `.env.${process.env.NODE_ENV || "development"}`
  });
  module.exports = withFonts(
    withSass(
      withCss({
        assetPrefix: process.env.BASE_PATH || "",
        basePath: process.env.BASE_PATH || "",
        publicRuntimeConfig: {
          basePath: process.env.BASE_PATH || ""
        },
        webpack: (config, { isServer }) =&gt; {     
          config.node = {
            fs: "empty"
          };
          if (isServer) {
            const antStyles = /antd\/.*?\/style\/css.*?/;
            const origExternals = [...config.externals];
            config.externals = [
              (context, request, callback) =&gt; {
                if (request.match(antStyles)) return callback();
                if (typeof origExternals[0] === "function") {
                  origExternals[0](context, request, callback);
                } else {
                  callback();
                }
              },
              ...(typeof origExternals[0] === "function" ? [] : origExternals)
            ];
  
            config.module.rules.unshift({
              test: antStyles,
              use: "null-loader"
            });
          }     
          const env = Object.keys(process.env).reduce((acc, curr) =&gt; {
            acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
            return acc;
          }, {});        
          config.plugins.push(new webpack.DefinePlugin(env));
          return config;
        }
      })
    )
  );
  </code></pre>
  
  <p>I have placed fonts inside public/fonts/ceraPRo-Black.ttf and css files in public/scss/stye.scss
  scss file</p>
  
  <pre><code>@font-face {
    font-family: CeraPro;
    src: url("../fonts/Cera/CeraPro-Medium.ttf");
    font-weight: 300;
    font-style: normal;
  }
  body {
    font-family: "CeraPro";
    font-weight: 400; 
  }
  </code></pre>
  
  <p>how can i fix this issue.</p>