Hugo Posts - Answer Overflow

Hugo

Explore posts from servers

•Created by Hugo on 11/2/2024 in #❓・help

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"

10 replies

Gaming

Programming