In una sorta di file CSS principale o di primo caricamento, basta fare:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');
Non è necessario inserire alcun tipo di @ font-face, ecc. La risposta che ricevi dall'API di Google è pronta per l'uso e ti consente di utilizzare le famiglie di caratteri come al solito.
Quindi nel JavaScript della tua app React principale, in alto metti qualcosa come:
import './assets/css/fonts.css';
Quello che ho fatto in realtà è stato app.css
importare un fonts.css
con alcune importazioni di caratteri. Semplicemente per organizzazione (ora so dove sono tutti i miei caratteri). La cosa importante da ricordare è che importi prima i caratteri.
Tieni presente che qualsiasi componente che importi nella tua app React dovrebbe essere importato dopo l'importazione dello stile. Soprattutto se questi componenti importano anche i propri stili. In questo modo puoi essere sicuro dell'ordine degli stili. Questo è il motivo per cui è meglio importare i caratteri nella parte superiore del file principale (non dimenticare di controllare il file CSS finale in bundle per ricontrollare se hai problemi).
Ci sono alcune opzioni che puoi passare l'API di Google Font per essere più efficiente durante il caricamento dei caratteri, ecc. Consulta la documentazione ufficiale: Inizia con l'API di Google Fonts
Modifica, nota: se hai a che fare con un'applicazione "offline", potresti effettivamente aver bisogno di scaricare i caratteri e caricarli tramite Webpack.
<link>
nell'intestazione della pagina, non nella tua app React, giusto? Specifichi direttamentefont-family
qualsiasi altro posto nel tuo foglio di stile o sui tuoi elementi?