How to add a custom font in Tailwind 4

[realguse]

I have a newly created project with SvelteKit and Vite, and have upgraded to the NEWEST Tailwind version (v4 alpha). But I'm wondering how you would add a custom font (let's say font.woff2). I have tried setting it with the @font-face in app.css but that doesn't work. Thank you.

[adamwathan]

Can you share an example project? What you've described sounds right to me, you just do it the same way you do with regular CSS.

[realguse]

This is what i tried in the app.css

@import "tailwindcss";

@font-face {
    font-family: "font";
    display: swap;
    src: url("/font.woff2");
}

and then my +layout.svelte

<script>
    import "../app.css";
</script>

<slot></slot>

then the +page.svelte

<div>
    <h1>Thank you!</h1>
</div>

btw, im using tailwind with vite:

import { sveltekit } from "@sveltejs/kit/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [sveltekit(), tailwindcss()],
});

[corneliusio]

@gu5e Make sure you're adding something like the following to generate/update the classes and custom properties.

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

[realguse]

Thank you so much @corneliusio!

[7flash]

I think your answer should be updated to

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

[brunobely]

What if I want to do what was previously done like this?

import { fontFamily } from 'tailwindcss/defaultTheme';

// ...

fontFamily: {
  sans: ['font', ...fontFamily.sans],
},

[realguse]

@brunobely I don't think there's anyway of doing this in the new css config, the closest you could come is via importing the tailwind js config with @config into the css config. Or if you wanna use css you could write the default fonts + the new custom font like this:

@theme {
	--font-sans: "font", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

Or you could just use sans-serif:

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

[kurumeii]

Or you could just use sans-serif

@realguse will it be enough, though? just curious and all

[realguse]

The average user would probably not see the difference. This is how I'm currently doing it on my website:

@font-face {
    font-family: Geist;
    font-display: swap;
    src: url("/geist.woff2") format("woff2");
}

@font-face {
    font-family: Calistoga;
    font-display: swap;
    src: url("/calistoga.woff2") format("woff2");
}

@theme {
    --font-sans: Geist, sans-serif;
    --font-serif: Calistoga;
}

It's simple, but it just works

[CustomEntity]

Hello, it doesn't work when I upgrade to the following version 4.0.0-alpha.34.

[RobinMalfait]

Hey! We renamed --font-family to --font, if you update your CSS then this should start working again 👍

See: #14885 for more info

[mdalmamunit427]

There I'm doing this way to customizing fonts, using google fonts and override it tailwind's default fonts:

@theme{

//override default fonts
--font-*: initial
--font-sans: "Satoshi", "sans-serif";

// custom fonts( to be safe I imported it from Google fonts)
--font-primary : "Poppins", "serif";
--font-secondary: "Roboto", "serif";
}

If need how I did this, here is a video

[realguse]

Remember to use sans-serif as a fallback font instead of serif @mdalmamunit427

[mdalmamunit427]

I was actually followed Google Fonts Family, there was serif that why I used it. Thank you for your feedback

[realguse]

Hmmmm, that's weird. sans-serif should be the most obvious option here, since neither Poppins or Roboto has serifs

[formbook]

if its not broke dont fix it

what a fking shambles

[titusdecali]

Indeed. I prefer this type of config to be in the tailwind.config file

[tobyweb3x]

@RobinMalfait @realguse

really sorry to bother, i've tried all i can think about and followed the instruction you gave, still does not work. please help.

[realguse]

Hi @tobyweb3x, it looks like you've forgot to add --font-sans to @theme which is what tailwind looks at for the default font.

Corrected:

@theme {
	--font-sans: "DM Sans-Regular";
}

You could also add the --font-dmSansRegular class in every place you'd like to use it

[tobyweb3x]

@theme {
  --font-dmSansRegular: "DM Sans-Regular";
}

this is how exactly i have it, looks the same with what you mentioned now (or what am i not getting please? @realguse ). also the intelisense is not picking it up... i do have the tailwindcss extension.

i very much appreciate the quick response.

[realguse]

I belive that I don't quite understand. Just for clarification, do you want to make DM Sans your default sans-serif font, or use it sparingly, by adding it as a class in your markup manually?

This is what you would do if you want to set it as the default sans font (just replace Brush Script MT with your font): https://play.tailwindcss.com/RDIkgD6aJ9

This is what you would do if you would like to use it only in specific places (notice the addition of setting the class manually in the markup): https://play.tailwindcss.com/e8A7FSv8wU

[tobyweb3x]

Please allow me to clarify better in a lots of words, so this is my current setup — changed the font to Archivo.

@font-face {
  font-family: "Archivo SemiCondensed-regular";
  font-style: normal;
  font-weight: 400;
  src: url("/public/assets/fonts/Archivo_SemiCondensed/Archivo_SemiCondensed-Regular.ttf")
    format("truetype");
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@theme {
  --font-archivo: "Archivo SemiCondensed-regular", san-serif;
}

@utility themed-btn {
  background-image: linear-gradient(88.93deg, #9945ff -4.48%, #12db88 114.18%);
}

/* .font-archivo {
  font-family: "Archivo SemiCondensed", sans-serif;
} */

the html:

<body class="text-[#EBEBEB] bg-[#06001B] font-archivo">

With this setup, it doesn’t work. But when I uncomment the native CSS font-archivo, everything works fine — so it’s clearly not a src issue (which I initially suspected).

I also noticed that Tailwind CSS IntelliSense in VSCode doesn’t recognize font-ar... — no autocomplete or hover info. That got me thinking it might be a Tailwind-related issue.

After digging deeper, I found out it was actually an override issue.

If I use the ! (important operator — not sure if that’s the correct term), the issue gets resolved and the font works. But even then, Tailwind CSS IntelliSense still doesn’t recognize the class.

So I have two questions:
1. How can I get it working without needing the !?
2. How do I fix Tailwind IntelliSense in VSCode? (The extension is already installed.)

<body class="text-[#EBEBEB] bg-[#06001B] !font-archivo">

Thanks 🙏, @realguse .

[realguse]

Thanks for the extra details @tobyweb3x. Could you also provide a minimal reproduction if possible (gh repo), that would help a ton. Other things you could try are maybe reinstalling tailwind or following the setup guide again. Sorry for not providing an immediate answer.

[dvlden]

This is how you'd change default font-family by keeping fallback options from Tailwind and without introducing additional custom class for your font.

@theme {
  --default-font-family: 'Inter', var(--font-sans);
}

Enjoy!

[harrison-broadbent]

For anyone finding this thread, I've collated it into a short blog post: custom fonts in Tailwind v4 & v3.

At a guess though: you're probably missing a line like this (goes after @import 'tailwindcss'):

@theme {
  --font-[name]: "your font name", sans-serif;
}

ie:

--font-mono: "Jetbrains Mono", monospace;

[PaulSinghDev]

If anyone else stumbles onto the issue of font-weights not taking effect check whether you have the @font-face rule defined in an @layer block. Removing them from the @layer solved it for me.

Not working:

@layer base {
  @font-face {
    font-family: "Bw Gradual";
    src: url("./assets/fonts/Bw-Gradual-Regular/BwGradual-Regular.woff2")
        format("woff2"),
      url("./assets/fonts/Bw-Gradual-Regular/BwGradual-Regular.woff")
        format("woff");
    font-weight: 400 600;
    font-style: normal;
  }

  @font-face {
    font-family: "Bw Gradual";
    src: url("./assets/fonts/Bw-Gradual-Regular-Italic/BwGradual-RegularItalic.woff2")
        format("woff2"),
      url("./assets/fonts/Bw-Gradual-Regular-Italic/BwGradual-RegularItalic.woff")
        format("woff");
    font-weight: 400 600;
    font-style: italic;
  }

  @font-face {
    font-family: "Bw Gradual";
    src: url("./assets/fonts/Bw-Gradual-Medium/BwGradual-Medium.woff2")
        format("woff2"),
      url("./assets/fonts/Bw-Gradual-Medium/BwGradual-Medium.woff")
        format("woff");
    font-weight: 700 800;
    font-style: normal;
  }

  @font-face {
    font-family: "Bw Gradual";
    src: url("./assets/fonts/Bw-Gradual-Medium-Italic/BwGradual-MediumItalic.woff2")
        format("woff2"),
      url("./assets/fonts/Bw-Gradual-Medium-Italic/BwGradual-MediumItalic.woff")
        format("woff");
    font-weight: 700 800;
    font-style: italic;
  }

  @font-face {
    font-family: "Bw Gradual";
    src: url("./assets/fonts/Bw-Gradual-Black/BwGradual-Black.woff2")
        format("woff2"),
      url("./assets/fonts/Bw-Gradual-Black/BwGradual-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
  }

  @font-face {
    font-family: "Bw Gradual";
    src: url("./assets/fonts/Bw-Gradual-Light/BwGradual-Light.woff2")
        format("woff2"),
      url("./assets/fonts/Bw-Gradual-Light/BwGradual-Light.woff") format("woff");
    font-weight: 100 300;
    font-style: normal;
  }
}

Working:

@font-face {
  font-family: "Bw Gradual";
  src: url("./assets/fonts/Bw-Gradual-Regular/BwGradual-Regular.woff2")
      format("woff2"),
    url("./assets/fonts/Bw-Gradual-Regular/BwGradual-Regular.woff")
      format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Bw Gradual";
  src: url("./assets/fonts/Bw-Gradual-Regular-Italic/BwGradual-RegularItalic.woff2")
      format("woff2"),
    url("./assets/fonts/Bw-Gradual-Regular-Italic/BwGradual-RegularItalic.woff")
      format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Bw Gradual";
  src: url("./assets/fonts/Bw-Gradual-Medium/BwGradual-Medium.woff2")
      format("woff2"),
    url("./assets/fonts/Bw-Gradual-Medium/BwGradual-Medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Bw Gradual";
  src: url("./assets/fonts/Bw-Gradual-Medium-Italic/BwGradual-MediumItalic.woff2")
      format("woff2"),
    url("./assets/fonts/Bw-Gradual-Medium-Italic/BwGradual-MediumItalic.woff")
      format("woff");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Bw Gradual";
  src: url("./assets/fonts/Bw-Gradual-Black/BwGradual-Black.woff2")
      format("woff2"),
    url("./assets/fonts/Bw-Gradual-Black/BwGradual-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Bw Gradual";
  src: url("./assets/fonts/Bw-Gradual-Light/BwGradual-Light.woff2")
      format("woff2"),
    url("./assets/fonts/Bw-Gradual-Light/BwGradual-Light.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}