I am using emotion's Global component to apply a global font to my app:

export const GlobalStyle: FC<{}> = () => (
  <Global
    styles={css`
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700;900&display=swap');

      body {
        font-family: 'Poppins', sans-serif;
      }
`}
  />

This approach works perfect well on localhost, but in production it does not: when I first load the page some default font appears (Liberation serif), not Poppins. Poppins is applied to the body only after I refresh the page.

My impression is the page is rendered before the font is available, and this is the reason why the correct font is displayed when the page is refreshed (by that time the font is already available), but not when I first load it.

Any help would very appreciated, as I tried to look for a solution everywhere, but was not able to find any.