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!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay