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!