Adding web fonts or regular fonts to a static website is relatively straightforward. However, when integrating a custom font into a Tailwind CSS-based Nuxt 3 instance, there are a few more steps involved before you can see the font in action. Here’s a detailed guide to help you through the process:

Step 1: Select Your Google Font

First, you need to select the Google Font you want to use:

1. Go to Google Fonts.
2. Browse and choose the font you want.
3. Copy the provided <link> tag or the @import URL.

Step 2: Add the Font to Your Main CSS File

Next, you need to add the selected font to your main CSS file:

1. Open your assets/css/main.css file.
2. Add the @import URL at the top of the file, replacing your-google-font-link with the actual URL you copied:

   @import url('your-google-font-link');
   

Step 3: Extend Tailwind Configuration

Finally, you need to extend the Tailwind configuration to include your new font:

1. Open the tailwind.config.js file.
2. Extend the fontFamily property to include your custom font. You can create a custom class to support your font:

   // tailwind.config.js
   module.exports = {
     theme: {
       extend: {
         fontFamily: {
           custom: ['YourFontName', 'sans-serif'],
         },
       },
     },
     plugins: [],
   };
   

Step 4: Use the Custom Font in Your HTML

Now you can use the custom font in your HTML:

<template>
  <div class="font-custom">
    Your text here
  </div>
</template>