DEV Community

Manuel Alférez Ruiz
Manuel Alférez Ruiz

Posted on • Updated 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 (1)

Collapse
 
nasirulahmed profile image
Nasirul Ahmed

i have implemented local fonts just like this and its working fine in local, but when deploy idt in aws it does not load. Do have any idea about this?