NuxtN
Nuxt•14mo ago
Hugo

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


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"
            ]
            },
        ]
        },
],

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"),
}

didn't worked too.
I'm lost, it's patethic to be lost on "Font customization"
Was this page helpful?