Next.js Google fonts don't load on the initial render

I'm importing the Google fonts into the custom _document.tsx Head component, but the fonts don't load on the initial render. The fonts are only loaded when I visit another page. Fonts work fine in the dev environment (next dev), Its only happening in production (next build > next start).

I tried setting display=optional in the link, not using scss variables, but none of that worked.

I'm importing two google fonts in custom _document.tsx in Head like this:

<Head>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet" />
</Head>

Setting it in styles/variables.scss:

$font: 'Poppins', sans-serif;
$font-hand: 'Berkshire Swash', cursive;

And using it like this in styles/global.scss:

@import './variables.scss';

body {
  font-family: $font;
}

And like this in components/UI/header/header.module.scss:

@import '../../../styles/variables.scss';

.logo {
  font-family: $font-hand;
}