CODEWITHSUNDEEP
next.js
Diagathe Josué
Diagathe Josué

Reputation: 11986

How lead my NextJS app to accept otf and ttf fonts?

I'm working with NextJS, when I build my app my console returns me:

ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.

I'm wondering what going's wrong since I have build a custom webpack's configuration.

Here my next.config.js: 

module.exports={ 
  exportPathMap: () => ({ 
      "/": {page: '/'}
  })
}

const config = { 
  cssModules: true,
  module:{ 
    rules:[ 
      {
        test:/\.(png|jpg|woff|svg|eot|ttf|woff2|otf)$/,
        loader:'url-loader?limit=8192&name=images/[name].[ext]'

        }
    ]
  }

}

// config.module.rules.push(

//   );

const   withCss =   require('@zeit/next-css');
const   withImages  =   require('next-images');
module.exports  =   withImages(withCss(config));

I have tried to launch my app with a css precising the nature of my font format vie format("opentype") and without it, but both fail:

@font-face {
    font-family: Moonlight;
    src: url(../assets/choiceFonts/Moonlights_on_the_Beach.ttf);
}

@font-face {
    font-family: Nenuphar;
    src: url(../assets/choiceFonts/Nenuphar_of_Venus.otf) format("opentype");
}


@font-face {
    font-family: Prida;
    src: url(../assets/choiceFonts/Prida01.otf) format("opentype");
}

Any hint would be great, thanks

Upvotes: 15

Views: 36283

Answers (6)

Paul Jurczyk
Paul Jurczyk

Reputation: 173

I think a more up-to-date answer would be -> if you want to set a global font for the whole body, then in layout.tsx:

import localFont from 'next/font/local'

// NOTE: I like to put font in public/fonts, however technically font files can be colocated inside of `pages`
const yourFont = localFont({ src: '../../public/fonts/your-font.ttf'})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={yourFont.className}>
        {children}
      </body>
    </html>
  )
}

There's more in the NextJS documentation: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts

Upvotes: 1

Salil Sharma
Salil Sharma

Reputation: 553

I used the following dependencies

npm install next-fonts

My next.config.js looked like this

 const withFonts = require('next-fonts');

 module.exports = withFonts({
    enableSvg: true,
    webpack(config, options) {
      return config;
    }
 });

Upvotes: 12

Rehan Sattar
Rehan Sattar

Reputation: 3945

For other people who are still suffering in this problem

In the latest versions of next, you store all of your static assets in /public directory which is on the root of your project. In that directory, store all your font files in a directory /fonts.

Then:

@font-face {
  font-family: 'font-name';
  src: url('/fonts/font-name.ttf'); // pattern: /directoryName/file.extension
 }

/* In your css file where you want to use the font */
.element { 
 font-family: 'font-name';
}

Upvotes: 38

Ph&#225;t Trương
Ph&#225;t Trương

Reputation: 21

My next.config.js

const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withFonts = require('next-fonts');

module.exports = withFonts(withCss(
  withSass({
    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;
    },
  }),
));

Upvotes: 2

Mehrdad Masoumi
Mehrdad Masoumi

Reputation: 410

add this code in next.config.js on project root

    const withCSS = require('@zeit/next-css');

function HACK_removeMinimizeOptionFromCssLoaders(config) {
    console.warn(
        'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
    );
    config.module.rules.forEach(rule => {
        if (Array.isArray(rule.use)) {
            rule.use.forEach(u => {
                if (u.loader === 'css-loader' && u.options) {
                    delete u.options.minimize;
                }
            });
        }
    });
}

module.exports = withCSS({
    webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config);
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
            }
        });

        return config;
    },
});

Upvotes: 2

Diagathe Josu&#233;
Diagathe Josu&#233;

Reputation: 11986

Resolved with next-fonts. Just install it in your next.config.js and you are done.

Upvotes: 4

Related Questions