DEV Community

Arif Ikhsanudin
Arif Ikhsanudin

Posted on

3 3

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!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay