How to use local font in Nuxt JS and TailwindCSS with Typefaces.js

This ideas come when I want to use Nuxt JS, TailwindCSS, and Typefaces at the same time.

Lets begin!

Select Typefaces

Typefaces come with many font family, but in this tutorial I will use Inter and Metropolis.

Add this two packages terminal

yarn add typefaces-inter
yarn add typefaces-metropolis

or use npm install

npm install typefaces-inter
npm install typefaces-metropolis

Add plugin

Add new file in plugins directory.

Example: /plugins/typeface.js

import "typeface-inter";
import "typeface-metropolis";

Then, register and transpile in nuxt.config.js

export default {
  ...
  plugins: ["~/plugins/typeface.js"],
  build: {
    ...
    transpile: ["typeface-inter", "typeface-metropolis"]
  },
}

Tailwind config

Now we can use our local font in tailwind config file

module.exports = {
  ...
  theme: {
    fontFamily: {
      display: "Metropolis",
      body: "Inter"
    }
  },
  ...
};

We Are Done!

Use font-display class for Metropolis font, and font-body class for Inter font.

If there any better way to do this, please let me know. Thanks for reading!