How to add a custom font to Tailwind CSS 4 using the CSS configuration

[ShawnXU0208]

In Tailwind CSS v4, what is the equivalent way to define a custom font in the CSS config, similar to the following setup in tailwind.config.js?

import { fontFamily } from 'tailwindcss/defaultTheme';

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['"MyCustomFont"', ...fontFamily.sans],
      },
    },
  },
};

I tried this in my css, but it doesn't work, the customised font get ignored

@import 'tailwindcss';

@plugin "tailwindcss-animate";

@theme {
  --font-sans: var(--my-chosen-sans-font), var(--font-sans);
  --font-serif: var(--my-chosen-serif-font), var(--font-serif);
}

[wongjn]

The equivalent would be:

@import 'tailwindcss';

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

[ShawnXU0208]

I was expecting an approach that doesn’t involve copying the entire default value.

[wongjn]

None such approach exists if you want to override said theme token. You can avoid copying if defining a new value:

@import 'tailwindcss';

@theme {
  --font-foo: "MyCustomFont", var(--font-sans);
}

Also, see #15253 (comment).

[ShawnXU0208]

Thanks, defining a new variable instead of overriding seems like a better option here for me.