I need help with Tailwindcss v4 and Inter font

[didix16]

Hello there,

I'm trying to move on to taildwindcss 4 with a new project and I want to include the Inter font.

I'm following this: https://rsms.me/inter/#usage
And this: https://tailwindcss.com/docs/v4-beta#customizing-your-theme.

I want to include this:

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

Into the scss file that tailwindcss have to process, but I don't know how to be done...

I've downloaded the font to have it locally. Then I wanted to include the font in mi app.scss file and try it something like this:

@layer theme, base, components, utilities;

@source "../js";
@source "../views";

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);
@import "inter.css";

@theme {
    --font-inter: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;

    @supports (font-variation-settings: normal) {
      --font-inter: InterVariable, sans-serif;
    }
}

But it fails:

[vite] Internal server error: [postcss] `@theme` blocks must only contain custom properties or `@keyframes`.   

  @theme {
>   @supports (font-variation-settings: normal) {
>     --font-inter: InterVariable, sans-serif;
>   }
  }

So I'm looking for some ideas of how it must be done to work properly with the new tailwindcss ecosystem.

Thanks in advance.

[wongjn]

You could try having the @supports block outside @theme like:

@theme {
    --font-inter: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-inter: InterVariable, sans-serif;
  }
}

[didix16]

Thanks for you fast reply!

Whell I've tried it but I get the following error:

[plugin:vite:css] [postcss] `@theme` blocks must only contain custom properties or `@keyframes`.

  @theme {
>   font-feature-settings: "liga" 1, "calt" 1;
  }

[wongjn]

Oh yes, sorry, it'd be like:

@theme {
    --font-inter: Inter, sans-serif;
}

@layer theme {
  :root {
    font-feature-settings: 'liga' 1, 'calt' 1;
  }

  @supports (font-variation-settings: normal) {
    :root {
    --font-inter: InterVariable, sans-serif;
    }
  }
}

[didix16]

Yeah, that works like a charm now. Thank you so much @wongjn !