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