NextJS export - how to include font correctly

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.

it works locally but not on the server? – Yilmaz Jul 08 '22 at 00:29 — Yilmaz, Jul 08 '22 at 00:29
Reference the fonts as `url('/fonts/Roboto-Light.ttf')`. – juliomalves Jul 09 '22 at 23:02 — juliomalves, Jul 09 '22 at 23:02

score 1 · Answer 1 · answered Jul 08 '22 at 03:47

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>

   )
}

score 0 · Answer 2 · edited Jul 13 '22 at 09:25

0

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

edited Jul 13 '22 at 09:25

Wai Ha Lee

8,598
83
57
92

answered Jul 08 '22 at 01:18

Daniel M

1
4

score 0 · Answer 3 · answered Jul 27 '22 at 09:41

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.

NextJS export - how to include font correctly

3 Answers3