Nuxt•3d ago

Add custom font with tailwind plugin

Hello guys, i'm struggling for 4 hours now on trying to import custom fonts on my project. I try to add the font with a tailwind plugin (so i can just copy the plugin and change the fonts on my diferents projects) But i can't make it work, the font class is created, but the font familly is not recognized. I added all woff and woff2 files in my /asset/fonts/font_name/ folder also i defined my font in tw theme:

fontFamily: {
  primary: 'Space Grotesk',
},

fontFamily: {
  primary: 'Space Grotesk',
},

then i tried several methods to add the font. in the theme:

fontFamilies:[
    {
        "fontFamily": "Space Grotesk",
        "name": "Principale",
        "slug": "primary",
        "fontFace": [
            {
            "fontFamily": "Space Grotesk",
            "fontWeight": "400",
            "fontStyle": "normal",
            "fontStretch": "normal",
            "src": [
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff",
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2"
            ]
            },
        ]
        },
],

fontFamilies:[
    {
        "fontFamily": "Space Grotesk",
        "name": "Principale",
        "slug": "primary",
        "fontFace": [
            {
            "fontFamily": "Space Grotesk",
            "fontWeight": "400",
            "fontStyle": "normal",
            "fontStretch": "normal",
            "src": [
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff",
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2"
            ]
            },
        ]
        },
],

didn't worked, with css :

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

@font-face{
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2") format("woff2"),url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff") format("woff"),
}

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

@font-face{
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2") format("woff2"),url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff") format("woff"),
}

didn't worked too. I'm lost, it's patethic to be lost on "Font customization"

5 Replies

kapa.ai•3d ago

Hi @Hugo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a custom font with Tailwind CSS in a Nuxt 3 project, you can follow these steps: 1. First, place your font files in the public/fonts directory of your Nuxt project. This ensures they are accessible as static assets. 2. Create a CSS file (e.g., assets/css/fonts.css) to define your custom font:

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
       url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
       url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff') format('woff');
  font-display: swap;
}

3. In your nuxt.config.ts file, add this CSS file to the global styles:

export default defineNuxtConfig({
  css: [
    '~/assets/css/fonts.css'
  ],
  // other config options...
})

export default defineNuxtConfig({
  css: [
    '~/assets/css/fonts.css'
  ],
  // other config options...
})

4. In your Tailwind configuration file (tailwind.config.js), extend the font family:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      }
    },
  },
  // other config options...
}

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      }
    },
  },
  // other config options...
}

5. Now you can use the font in your components with the font-primary class:

<h1 class="font-primary">Hello, Space Grotesk!</h1>

<h1 class="font-primary">Hello, Space Grotesk!</h1>

This approach is based on the information from Nuxt documentation on styling (https://nuxt.com/docs/getting-started/styling#working-with-fonts) and Stack Overflow post on changing default Tailwind font-family in Nuxt 3 (https://stackoverflow.com/questions/77970841). Make sure your font files are in the correct location and that the paths in your CSS @font-face declaration are correct. The key is to use the public directory for static assets like fonts in Nuxt 3. If you're still having issues, double-check that your Tailwind and Nuxt configurations are correct and that there are no conflicting styles overriding your font declarations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

HugoOP•3d ago

Didn't worked @kapa.ai

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the previous solution didn't work for you. Let's try to troubleshoot this issue further. Since you mentioned that the font class is created but the font family is not recognized, there might be a few things we can check: 1. First, make sure your font files are in the correct location. In Nuxt 3, they should be in the public/fonts directory, not in assets/fonts as mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/styling#working-with-fonts). 2. Double-check your @font-face declaration. It should look something like this:

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff') format('woff'),
       url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff') format('woff'),
       url('/fonts/space_grotesk/SpaceGrotesk-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Note the path starts with /fonts/ instead of ./assets/fonts/. 3. Make sure this CSS is loaded globally. You can do this by adding it to your nuxt.config.ts file:

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // other config...
})

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // other config...
})

4. In your Tailwind configuration, make sure you're extending the theme correctly:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Space Grotesk', 'sans-serif']
      }
    },
  },
  // other config...
}

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Space Grotesk', 'sans-serif']
      }
    },
  },
  // other config...
}

This will set 'Space Grotesk' as your default sans-serif font. 5. If you're using the @nuxtjs/tailwindcss module, make sure it's properly registered in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  // other config...
})

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  // other config...
})

If you've done all of these steps and it's still not working, there might be an issue with how the font is being loaded or applied. In that case, it would be helpful to check your browser's developer tools to see if the font files are being loaded correctly and if there are any CSS conflicts. If the problem persists, it might be worth reporting it as a potential bug (https://nuxt.com/docs/community/reporting-bugs) to the Nuxt community, as there could be an underlying issue with how fonts are being handled in your specific setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Add custom font with tailwind plugin