NextJS export - how to include font correctly - deployment

Question

I am hosting a website on a server where NodeJs is not available. I am using npm run export and deploying the content of the out folder on the server.
I managed to fixed the issues for serving CSS, JS and images but I cannot figure out how to serve the fonts.
I am importing the fonts as follows in globals.css and it works locally:
#font-face {
font-family: "Roboto Light";
src: url('../public/fonts/Roboto-Light.ttf');
}
#font-face {
font-family: "Roboto Black";
src: url('../public/fonts/Roboto-Black.ttf');
}
#font-face {
font-family: "Due Credit Regular";
src: url('../public/fonts/Due-Credit-Regular.otf');
}
#font-face {
font-family: "Otamendi";
src: url('../public/fonts/Otamendi.ttf');
}
#font-face {
font-family: "Compacta Regular";
src: url('../public/fonts/Compacta-Regular.ttf');
}
I tried this solution but it did not work.

Answer 1

I am going to introduce my solution.
First, you need to place font files(*.ttf, *.woff) in public directory. Assuming that your font files take place in /public/fonts.
/public
/fonts
Roboto-Bold.ttf
Roboto-Bold.woff
Roboto-Bold.woff2
Roboto-Italic.ttf
Roboto-Italic.woff
Roboto-Italic.woff2
Roboto-Regular.ttf
Roboto-Regular.woff
Roboto-Regular.woff2
Second, create fontstyle.css in /public/fonts and write content like below.
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Italic.woff2') format('woff2'),
url('./Roboto-Italic.woff') format('woff'),
url('./Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Bold.woff2') format('woff2'),
url('./Roboto-Bold.woff') format('woff'),
url('./Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Regular.woff2') format('woff2'),
url('./Roboto-Regular.woff') format('woff'),
url('./Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Third, import your fontstyle.css in your root component or application component.
index.js
import 'public/fonts/fontstyle.css';
...
Or if you already configured jsconfig.json in the root directory of your project, declare public directory and use it.
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
...
"#public/*": [
"public/*"
],
}
}
}
index.js
import '#public/fonts/fontstyle.css';
...
Then you can use Roboto font family in your components.
global.css
.myoddbtn{
font-family: Roboto;
font-size: 14px;
font-weight:400;
}
TestButton.jsx
export default function TestButton(){
return (
<button className="myoddbtn">
Font-family:Roboto
</button>
)
}

Answer 2

Try removing the '../public' part of your links: your js bundle will be in a different folder in production.

Answer 3

Tried the other answers here without success. Ultimately the issue for me was that the paths during 'next export' get rewritten everywhere but in the css files. And that unfortunately did not get solved by the proposed solutions.
However I ended up using the solution to another similar In another Stack Overflow question found here This solution uses replace-in-file to rewrite the paths in css also.
Just wanted to leave an answer here for anyone who finds this question first like me.