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;
      }

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'],
    })

tailwind.config.ts

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

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

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>

Here we go

See you in next article!