I am setting up my first electron-react project and when I import fonts as global styles they never load:

import neuropolitical from './fonts/neuropolitical rg.ttf';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Neuropolitical';
    src: url(${neuropolitical}) format('truetype');
    font-style: normal;
  }
  * {
    color: green;
    font-family: 'Neuropolitical';
  }
  
`;

export default function App() {
  return (
      <div>
      <GlobalStyle />
        <h1>HEY, This is supposed to be neuropolitical rg font.</h1>
      </div>
  );
}

Here, it says it uses the correct font family; also, the text is green, so global style is applied:

Render

I have tried importing both local and web fonts. None work. This is my Index.js just to show there's nothing to override it:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Here is my file heirarchy:

Heirarchy

The font supports normal latin letters. What am I missing?