How to import custom fonts in Next JS?

user_17332076 0
Viewed 1179

I have currently downloaded this repository:

https://github.com/adrianhajdin/portfolio_website

from this tutorial:

https://www.youtube.com/watch?v=OPaLnMw2i_0&list=LL&index=3&ab_channel=JavaScriptMastery

It is a Next Js project using react that is customizable, I am however having issues with importing my own custom fonts as it does not seem to support regular CSS.

The only options that I see for changing the fonts are in these settings here:

enter image description here

I cannot seem to import a custom font family locally using CSS. If I try to add a style.css in the same repository and reference my font family in the module export nothing happens.

Does anyone know how to resolve this?

tailwind-css reactjs css javascript
1 Answers

which ever file you are using as global.css or index.css first import it like this in that file

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

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

// rest of your css if have

then goto `tailwind.config.js and use it like this:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        body: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [],
};
user_109393730
Related