title: How to configure i18n with withFonts()
body: <p>I am working on a Next.js project using Tailwind CSS for styling. I am stuck at the <code>next.config</code> file.</p>
  <p>I've almost tried everything to make this code work but cannot.</p>
  <pre class="lang-js prettyprint-override"><code>const withPlugins = require(&quot;next-compose-plugins&quot;);
  const withImages = require(&quot;next-images&quot;);
  const withSass = require(&quot;@zeit/next-sass&quot;);
  const withCSS = require(&quot;@zeit/next-css&quot;);
  const withFonts = require(&quot;next-fonts&quot;);
  const webpack = require(&quot;webpack&quot;);
  const path = require(&quot;path&quot;);
  
  module.exports = withFonts(
    withCSS(
      withImages(
        withSass({
          webpack(config, options) {
            config.module.rules.push({
              test: /\.(eot|ttf|woff|woff2)$/,
              use: {
                loader: &quot;url-loader&quot;,
              },
            });
            config.resolve.modules.push(path.resolve(&quot;./&quot;));
            return config;
          },
        })
      )
    )
  );
  
  module.exports = {
    i18n: {
      locales: ['en', 'fr'],
      defaultLocale: 'en',
    },
  }
  </code></pre>
  <p>I'd like to know how to combine these two things.</p>
  <p>Here is the code of the <code>index.js</code> i'm using.</p>
  <pre class="lang-js prettyprint-override"><code>import { useRouter } from 'next/router';
  import fr from '../locales/fr';
  import en from '../locales/en';
  
  function sth () {
    const router = useRouter();
    const { locale } = router;
    const t = locale === 'en' || 'undefined' ? en : fr;
    console.log(locale);
  
    return t;
  }
  export default function Index() {
    const t  = sth();
    return (
      &lt;&gt;
        &lt;IndexNavbar fixed /&gt;
        &lt;section className=&quot;header relative pt-16 items-center flex h-screen max-h-860-px&quot;&gt;
          &lt;div className=&quot;container mx-auto items-center flex flex-wrap&quot;&gt;
            &lt;div className=&quot;w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4&quot;&gt;
              &lt;div className=&quot;pt-32 sm:pt-0&quot;&gt;
                &lt;h2 className=&quot;font-semibold text-4xl text-gray-700&quot;&gt;
                  {t.homeMainTitle}
                &lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/&gt;
  );}
  </code></pre>
  <p>The content of <code>sth()</code> function was inside the <code>Index()</code> and it doesn't work either way.</p>