DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Manuel AlfΓ©rez Ruiz
Manuel AlfΓ©rez Ruiz

Posted on

Custom fonts in Next.js + Tailwindcss

To add fonts to your Next.js project you do not need any extra dependency:

1- Download your fonts and add them to the public/fonts directory.

2- Tailwindcss tells us in their guide the fastest way to include Tailwind if we do not plan to write any custom CSS in our project is to import it directly into pages/_app.js:

// pages/_app.js

- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
}

export default MyApp
Enter fullscreen mode Exit fullscreen mode

However, this is not our case and therefore we maintain styles/globals.css:

// styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

3- Declare your fonts in style/globals.css:

// styles/globals.css

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

@font-face {
  font-family: 'MyFont';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('/fonts/MY-FONT.woff') format('woff');
}

@font-face {
  font-family: 'MyFont';
  font-style: bold;
  font-weight: 600;
  src: local(''), url('/fonts/MY-FONT-BOLD.woff') format('woff');
}
Enter fullscreen mode Exit fullscreen mode

4- Configure Tailwindcss to add the fonts you have imported:

// tailwind.config.js 

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'

  theme: {
    extend: {
      fontFamily: {
        myfont: ['MyFont'],
        sans: ['MyFont', 'sans-serif'],
      },
    },
  },

  variants: {
    extend: {
      fontFamily: ['hover', 'focus'],
    },
  },

  plugins: [],
  corePlugins: {
    fontFamily: true,
  },
};
Enter fullscreen mode Exit fullscreen mode

5- Use your font 😊

// components/MyComponent.js

export default function MyComponent() {
  return (
    <div className="font-myfont">
      Hello World
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Any questions about the post? Feel free to ask me.

Original post.

Top comments (0)

Let's team up together 🀝

We're hiring for a Senior Full Stack Engineer. Head here to learn more and apply.