Custom font in Next.js + Tailwind: no error, but wrong font

Question

In my Next.js (9.4.4) / Tailwind.css (1.4.6) project, I'm using a custom font called SpaceGrotesk. To make it work, I put my fonts my public/fonts/spaceGrotesk, and then, I configured my files as follows:

// next.config.js
module.exports = {
    cssModules: true,
    webpack: (config, options) => {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
};

/** tailwind.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

@font-face {
    font-family: SpaceGrotesk;
    font-weight: 400;
    font-display: auto;
    src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("woff");
}

// tailwind.config.js
module.exports = {
    purge: {
        mode: "all",
        content: [
            "./components/**/*.js",
            "./Layout/**/*.js",
            "./pages/**/*.js"
        ],
    },

    important: true,
    theme: {
        extend: {
            fontFamily: {
                paragraph: ["Crimson Text, serif"],
                spaceGrotesk: ["SpaceGrotesk, sans-serif"],
            },
        },
    },
};

I used to have a lot of trouble with import errors displayed on the console, but fixed them all. Now, however, I still don't get the right fonts. The console shows no warning, the inspector seems to say that the font is loaded correctly, but the back-up font (sans-serif) is still used instead of SpaceGrotesk.

What did I do wrong to import my font?

mooxl · Answer 1 · 2021-06-05T19:22:02.363

In order to integrate your own fonts into your Next project, you do not need another dependency in the form of an npm module.

To get to the font in your globals.css, you have to put the font into the public folder. Then you integrate the font in the globals.css to give it to the CSS-framework in the tailwind.config.js. Afterwards, you simply have to add it to the respective element, or you define it globally.

globals.css

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

@font-face {
  font-family: "Custom";
  src: url("/CustomFont.woff2");
}

body {
  @apply font-custom; //if u want the font globally applied
}

tailwind.config.js

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false,
  theme: {
    extend: {
      fontFamily: {
        custom: ["Custom", "sans-serif"]
      }
    }
  }
}

score 5 · Accepted Answer · answered Jun 28 '20 at 10:25

I finally solved the issue thanks to the next-fonts package:

Step 1:

Install next-fonts:

npm install --save next-fonts

Step 2:

Import it in next.config.js:

// next.config.js

const withFonts = require("next-fonts");

module.exports = withFonts({
    webpack(config, options) {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
});

Step 3:

Put your files anywhere in the public folder. For example, I put my SpaceGrotesk font in public/fonts/spaceGrotesk.

Step 4:

Import them in your CSS using @font-face:

// tailwind.css

@font-face {
    font-family: "SpaceGrotesk";
    font-weight: 400;
    src: url(/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("woff");
}

Note that the URL does not have /public in front of it. That was the cause of an issue I had.

Step 5:

Just use your font like any other:

// tailwind.css

a {
    font-family: "SpaceGrotesk";
}

Step 6 (optional):

You can add the font to your config so you can use the class font-space-grotesk:

// tailwind.config.js

module.exports = {
    // ...The rest of your config here...
    theme: {
        extend: {
            fontFamily: {
                "space-grotesk": ["SpaceGrotesk, sans-serif"],
            },
        },
    },
};

score 0 · Answer 3 · answered Jun 21 '20 at 23:53

0

There is no format "font-woff".

Replace

src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("font-woff");

with

src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("woff");

answered Jun 21 '20 at 23:53

chojnicki

3,148
1
18
32

I used to have that, and I had 2 warnings: `Failed to decode downloaded font`, `OTS parsing error: invalid version tag`. I found the "font-woff" solution here and it removed my warning: https://stackoverflow.com/questions/30442319/failed-to-decode-downloaded-font – Thanh-Quy Nguyen Jun 22 '20 at 08:27
The answer is you are linking is wrong, and you can even read this in comment. Like I said, there is no format "font-woff". You could write "whatever-woff-whatever" with same effect. Error you are getting now has nothing to do with this question so you should make new one describing this error. My answer is still correct based on code provided in this question. – chojnicki Jun 22 '20 at 21:18
Thanks, then I'm going to edit it. The true problem is truly coming from the way I import the font, though... "font-woff" was just a temporary fix that I kept to remove the warning. – Thanh-Quy Nguyen Jun 23 '20 at 09:19

score 0 · Answer 4 · answered Sep 15 '21 at 12:16

In Next.JS version 10 and above, not sure about previous versions, you do not need to replace ../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff with /fonts/spaceGrotesk/SpaceGrotesk-Regular.woff

When serving your static assets from your public folder, you do not to specify the public folder but just the link as if the public folder is the root folder. Static File Serving