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"

Nuxt•16mo ago•

9 replies

Hugo

Add custom font with tailwind plugin

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"

Add custom font with tailwind plugin

Similar Threads

Add custom font with tailwind plugin

Similar Threads

Similar Threads

Similar Threads