Google fonts not applied to deployed react app on Github Pages

Question

I'm using styled-components for my app, and I imported a google font url in createGlobalStyle. :

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`



* {
    @import url(//fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
}

After deploying the app, the font is not applied. I tried replacing the @import url from https://fonts.. to http://fonts.. and then currently //fonts... These are some solutions I found that have worked for some, but not for me. What seems to be the problem here?

here is the link of the deployed app: http://patorikkun.github.io/tip-calculator-app

Answer 1

Try to move the @import to top level, outside * {}

From:

createGlobalStyle`
* {
    @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
    margin: 0;
    ...
}
...
}`;

To:

createGlobalStyle`
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
}

...
}`;

From the MDN explanation:

Imported rules must precede all other types of rules, except @charset rules;