title: How to add font ttf file in nextjs
body: <p>I am new to Nextjs. I wanna add my custom fonts to my project. I am totally confused about how to do that(my fonts are in &quot;public/fonts/&quot;). my global.css file is this-</p>
  <pre><code>html,
  body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  * {
    box-sizing: border-box;
  }
  
  @font-face {
    font-family: &quot;Avenir&quot;;
    src: url(&quot;../public/fonts/AvenirNextRoundedStd-Demi.ttf&quot;);
    src: url(&quot;../public/fonts/AvenirNextRoundedStd-MedIt.ttf&quot;);
    src: url(&quot;../public/fonts/AvenirNextRoundedStd-Reg.ttf&quot;);
  }
  </code></pre>
  <p>and this is my next config file -</p>
  <pre><code>// next.config.js
  const withCSS = require(&quot;@zeit/next-css&quot;);
  module.exports = withCSS({
    /* config options here */
  });
  </code></pre>