DEV Community

Elif Nur Turk
Elif Nur Turk

Posted on

Custom Text Font Usage in Nuxt.js with Tailwind CSS

Custom Text Font Usage in Nuxt.js with Tailwind CSS

By integrating custom fonts into your Nuxt.js project, you can make your web application truly stand out. Tailwind CSS, known for its utility-first framework, simplifies this process, making it both efficient and effective. This article will take you through the steps to effortlessly incorporate custom fonts into your Nuxt.js project using Tailwind CSS.

Assuming you’ve already set up Tailwind CSS in your project, the next step is integrating custom fonts to elevate your design. Custom fonts can transform the look and feel of your Nuxt.js application, adding a unique touch that sets it apart.

For this article, we'll be using the eye-catching Dirty Headline 2 font. To get started, you'll need to download the font from your browser in ZIP format. Once downloaded, extract the "Dirty Headline.ttf" file from the ZIP archive. This font will add a unique flair to our project, ensuring our typography stands out with a bold and distinctive style.

Let’s create the following folders into the assets folder;

-assets/css/font.css

-assets/fonts/

| assets/
| |- css/
| | |- font.css
| |- fonts/
| | |- DirtyHeadline.ttf
| pages/
| |- index.js
|- app.vue
|- nuxt.config.ts
|- package.json
|- tailwind.config.js

To incorporate the DirtyHeadline.ttf font file into project pull it to assets/font folder and create a font.css file to define the @font-face rule for this font.

/assets/css/font.css

    @font-face {
        font-family: 'Dirty Headline 2';
        src: url('~/assets/fonts/DirtyHeadline.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
      }

Enter fullscreen mode Exit fullscreen mode

Let’s integrate this font into your nuxt.config.ts and tailwind.config.js files.

nuxt.config.ts

    export default defineNuxtConfig({
      css: ['@/assets/css/fonts.css'],
    })
Enter fullscreen mode Exit fullscreen mode

tailwind.config.ts

    /** @type {import('tailwindcss').Config} */

    export default {
      theme: {
        extend: {
          fontFamily: {
            'dirty-headline': ['"Dirty Headline 2"', 'sans-serif']
          }
        }, 
      },
     }
Enter fullscreen mode Exit fullscreen mode

So, we can try the new font in our vue pages!

pages/index.vue

    <template>
      <div>
        <h1> class="font-dirty-headline">The Dirty Font!</h1>
      </div>
    </template>

Enter fullscreen mode Exit fullscreen mode

Here we go

See you in next article!

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay