CODEWITHSUNDEEP
next.jstailwind-css
Forsto
Forsto

Reputation: 45

Next.js Wrong Path to Fonts on Export

when I export the Nextjs files, the fonts, are wrong. In the console I get the following error:[![downloadable font: download failed (font-family:

This is how my global.css file looks:

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "HELIOSBOLD";
  src: url("/fonts/HeliosAntiqueBold.otf")
}

@font-face {
  font-family: "HELIOS";
  src: url("/fonts/HeliosAntique-Regular.otf") 
}

And this is what I have in next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
};

module.exports = nextConfig;

module.exports = {
    assetPrefix: './',
    optimizeFonts: false,
};

The fonts are located in the /public/fonts/ directory.

On export I notice that the path to fonts in the .css file is /fonts/HeliosAntiqueBold.otf

but it should be: ../../../fonts/HeliosAntiqueBold.otf to function corectly.

How can I get this to work without manually editing the file?

Upvotes: 0

Views: 1446

Answers (1)

Forsto
Forsto

Reputation: 45

If anyone else has the same problem, here is the solution I found: First you need to install the library:

npm i --save replace-in-file

Then create a replacer.js at the root of your project and paste the below code in it:

const replace = require('replace-in-file');
const options = {
    //you may need to modify the file address to suite your project
    files: './out/_next/static/css/*.css',
    from: ['/fonts/YOURFONT.woff2'],
    to: ['../../../fonts/YOURFONT.woff2'],
};
(async function () {
    try {
        const results = await replace(options);
        console.log('Replacement results:', results);
    } catch (error) {
        console.error('Error occurred:', error);
    }
})();

Add the followings to your package.json "scripts":

"export": "next build && next export && npm run replaceFilePaths ",
"replaceFilePaths": "node replacer.js",

Hope this helps ;)

Upvotes: 1

Related Questions