How to Add Custom Fonts (Like Inter) to a Vue 3 + TailwindCSS Project

Customizing fonts is a great way to enhance the visual appeal and uniqueness of your Vue 3 app. Let's dive into how to install custom fonts like "Inter" in a Vue 3 CLI project that uses TailwindCSS.

Download the Font Files

First, download the "Inter" font files. You can get them from Google Fonts or directly from the Inter font website. Ensure you have the font files in .woff and .woff2 formats for better compression and faster load times. Other common formats are ttf, otf, eot and svg.

Add the Font to Your Project

Once downloaded, place the font files in the src/assets/fonts directory of your Vue 3 project. Creating a dedicated fonts folder helps keep your assets organized.

Choose the Correct Font Format

When setting up your @font-face, it's vital to specify the correct format for your font files:

.woff files: Use format('woff')
.woff2 files: Use format('woff2')
.ttf files: Use format('truetype')
.otf files: Use format('opentype')
.eot files: Use format('embedded-opentype')
.svg files: Use format('svg')

This ensures that the browsers recognize and load the appropriate font type.

Define Font-Face in TailwindCSS

TailwindCSS allows you to place your @font-face rules directly in the main tailwind.css file. Here's how you can define the "Inter" font within the @layer base directive:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Inter';
    src: url('@/assets/fonts/Inter-Regular.woff2') format('woff2'), url('@/assets/fonts/Inter-Regular.woff')
        format('woff');
    font-weight: 400;
    font-style: normal;
  }
  // ... Include all the font weights and styles you need
}

The @/ is an alias to your src directory and Vite (Vue 3's build tool) will resolve this correctly.

You could also include font-display: swap to ensure the text remains visible during font loading.

Update Tailwind Configuration

TailwindCSS uses a configuration file to customize its defaults. Extend your tailwind.config.js to include the "Inter" font:

javascript

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

This code sets "Inter" as the default sans-serif font for your project.

Use the Font in Your Components

Now, you can use the font in your Vue components like so:

html

<template>
  <div class="font-sans">This is using the Inter font.</div>
</template>

The font-sans class now corresponds to the "Inter" font, applying it to the text inside the div.

Build and Test

Run your Vue app to see the changes:

bash

npm run serve

Inspect your application to ensure that the "Inter" font is being applied. You might need to clear your browser cache or perform a hard refresh to see the new font.

Conclusion

Congratulations! You've successfully integrated a custom font into your Vue 3 and TailwindCSS project. By following these steps, you can inject more personality into your app with the "Inter" font or any other font of your choice. Remember that the key to a successful integration is proper organization of your font files and correct configuration in your Tailwind setup. Happy coding!

How to Add Custom Fonts (Like Inter) to a Vue 3 + TailwindCSS Project ​

Download the Font Files ​

Add the Font to Your Project ​

Choose the Correct Font Format ​

Define Font-Face in TailwindCSS ​

Update Tailwind Configuration ​

Use the Font in Your Components ​

Build and Test ​

Conclusion ​