Custom font with NextJS?

[ahetawal-p]

I am having trouble loading custom fonts with NextJs.
I saw this similar discussion #1257 and tried to follow the recommended solution, but I am still not sure why it doesnt work here is my setup.

import common from './TTCommonsPro-Regular.ttf'

export function CustomFonts() {
  return (
    <Global
      styles={[
        {
          '@font-face': {
            fontFamily: 'TT Commons Pro',
            src: `url('${common}') format("ttf")`,
            fontWeight: 'normal',
            fontStyle: 'normal',
          },
        },
      ]}
    />
  )
}

With the above setup, when I try to bring up my app, I see this error from NextJs

./components/layout/TTCommonsPro-Regular.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I did try to update the webpack config to support ttf files, like this:

module.exports = {
    webpack: (config, options) => {
        config.module.rules.push({
            test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/,
            type: 'asset/resource',
            generator: {
                filename: 'static/chunks/[path][name].[hash][ext]'
            },
        });

        return config;
    }
};

Even after the above setup I still dont see the fonts getting loaded.
What else can I try here ?

[rtivital]

You can load fonts with regular CSS if Global component does not work for you

[ahetawal-p]

Thanks it seems, it was a problem with my font files, as browser was defaulting them to local fonts instead of network file.
Updated the files now, and it works.