Estoy configurando mi primer proyecto de reacción electrónica y cuando importo fuentes como estilos globales, nunca se cargan:

 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> ); }

Aquí, dice que usa la familia de fuentes correcta; además, el texto es verde, por lo que se aplica el estilo global:

Prestar

He intentado importar fuentes locales y web. Ninguno funciona. Este es mi Index.js solo para mostrar que no hay nada que lo anule:

 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();

Aquí está mi jerarquía de archivos:

jerarquía

La fuente admite letras latinas normales. ¿Qué me estoy perdiendo?