javascriptreactjswebpacknext.jstailwind-css

Reputation: 3265

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

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?

Upvotes: 5

Answers (4)

Mfundo Shabalala

Reputation: 61

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

Upvotes: 0

mooxl

Reputation: 141

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"]
      }
    }
  }
}

Upvotes: 13

Thanh-Quy Nguyen

Reputation: 3265

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"],
            },
        },
    },
};

Upvotes: 5

chojnicki

Reputation: 3623

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