How to apply custom font family globally in tailwind v4

[ScarletKuro]

Another font theme issue, but I can’t just get this to work. Any suggestions?

I’m using Tailwind with Blazor https://github.com/kallebysantos/tailwind-dotnet, and I have the following styles.css:

@import "tailwindcss";

@font-face {
  font-family: 'GTWalsheim';
  src: url('../fonts/GTWalsheim/gt-walsheim-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'GTWalsheim';
  src: url('../fonts/GTWalsheim/gt-walsheim-regular-oblique.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'GTWalsheim';
  src: url('../fonts/GTWalsheim/gt-walsheim-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'GTWalsheim';
  src: url('../fonts/GTWalsheim/gt-walsheim-medium-oblique.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'GTWalsheim';
  src: url('../fonts/GTWalsheim/gt-walsheim-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'GTWalsheim';
  src: url('../fonts/GTWalsheim/gt-walsheim-bold-oblique.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@theme {
  --font-gt: "GTWalsheim", sans-serif;
}

@layer theme {
  :root, :host {
    --default-font-family: "GTWalsheim", sans-serif;
  }
}

However, --default-font-family doesn’t seem to pick up GTWalsheim for text:

<div class="h-[92px] bg-[#F5F8F7] grid grid-cols-[auto_1fr] items-center px-8 select-none">
  <span class="text-[20px] font-medium text-[#004152]">Selected coupons:</span>
  <strong class="text-[32px] font-medium text-[#004152] text-right">0.00 EUR</strong>
</div>

It still uses the default sans font. However, if I append font-gt to the class list, it works fine.

I’ve tried different combinations in styles.css, but nothing else worked. The only solution that did work was adding:

html, body {
  font-family: var(--font-gt);
}

to styles.css, but it feels like I’m doing something wrong.

[rozsazoltan]

The way is correct. You need to declare the --default-font-family in the @theme TailwindCSS-specific directive:

@theme {
  --font-gt: "GTWalsheim", sans-serif;
  --default-font-family: "GTWalsheim", sans-serif;
}

Or without duplication:

@theme {
  --font-gt: "GTWalsheim", sans-serif;
  --default-font-family: var(--font-gt);
}

[ScarletKuro]

Ah, thanks, now I see that default-font-family is being overridden correctly. However, I then discovered that a Blazor-specific app.css was still overriding it.
from tailwinds:

  html, :host {
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
  }

to

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

I’ve fixed it now. This discovery might be useful for others who create Blazor apps using the default template.