Custom @font-face rule with Tailwind 4 is not included in SSR response

I'm playing around with some fallback fonts to try and solve CLS issues. However, the problem I've noticed is that the @font-face is included in the outputted CSS file which is being loaded after initial render, but it's not included in the SSR response's inlined styles.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap')
layer(base);

@import 'tailwindcss';

@layer base {
@font-face {
font-family: poppins-fallback;
src: local('Arial');
size-adjust: 114%;
ascent-override: 130.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
}

@theme {
--font-poppins: Poppins, poppins-fallback, sans-serif;
}


This CSS is included in the Angular application like:

"styles": ["libs/tailwind/src/lib/tailwind.config.css"


I remember other problems requiring the CSS to be minified with minify set to true:

{
"plugins": {
"@tailwindcss/postcss": {
"optimize": {
"minify": true
}
}
}
}


But this has no effect on my problem.

Does anyone know why this happens and how to fix it?

Continue reading...