Custom @font-face is not included in SSR response

[chriswoodie]

I'm playing around with some fallback fonts to try and solve CLS issues:

@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
      }
    }
  }
}

However, this has zero effect on my problem. 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.

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