My font does not appear in Network (reactjs, styled components) - reactjs

Question

I am actually blocked by an issue with the font import in a React project (working with styled-components).
This is my Fonts file:
import { createGlobalStyle } from 'styled-components';
import NameOfYourFontWoff from './ClickerScript.woff';
import NameOfYourFontWoff2 from './ClickerScript.woff2';
export default createGlobalStyle`
#font-face {
font-family: 'Font Name';
src: local('Font Name'), local('FontName'),
url(${NameOfYourFontWoff2}) format('woff2'),
url(${NameOfYourFontWoff}) format('woff');
font-weight: 300;
font-style: normal;
}
`;
and this is my index.js where I import my font and styles :
import GlobalStyles from './styles/globalStyles';
import GlobalFonts from './fonts/Fonts';
ReactDom.render((
<React.Fragment>
<ThemeProvider theme={theme}>
<GlobalFonts />
<GlobalStyles />
<Provider store={store}>
<Main />
</Provider>
</ThemeProvider>
</React.Fragment>
), document.getElementById('tetris'));
With this, I can see the font is given to my div, but I have no change, and my font does not appear in the Network flow. Any idea ?

Answer 1

I don't know these fonts, but if they are any different, add them in two times
in this example i took it like one of them was italic
#font-face {
font-family: 'ClickerScript';
src: url(${NameOfYourFontWoff}) format('woff'),
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'ClickerScript';
src: url(${NameOfYourFontWoff2}) format('woff2'),
font-weight: normal;
font-style: italic;
}
Let me know if it works and for clarification, you don't see any of these font loaded (even failed) in the request tab ?