0

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?

Vid Forstner
  • 45
  • 4

1 Answers1

1

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 ;)

Vid Forstner
  • 45
  • 4
  • 1
    This answer helped me a lot solving the same issue! However I used some time figuring out why only the first occurrence was replaced. To replace multiple paths to fonts It turns out you need to use a regex in the from value and not a string. which means that for a path to work you also need to escape the slashes. So my value of from looks like this `from: [/_next\/static\/media\//g],` More info can be found under "Replace all occurrences" in the docs at girhub: https://github.com/adamreisnz/replace-in-file#multiple-values-with-the-same-replacement – Graunephar Jul 27 '22 at 09:34