En algún tipo de archivo CSS principal o de carga inicial, simplemente haga:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');
No necesitas incluir ningún tipo de @ font-face, etc., la respuesta que recibes de la API de Google está lista y te permite usar familias de fuentes como de costumbre.
Luego, en su aplicación principal de React, JavaScript, en la parte superior coloque algo como:
import './assets/css/fonts.css';
Lo que hice en realidad fue hacer una app.css
importación fonts.css
con algunas importaciones de fuentes. Simplemente por organización (ahora sé dónde están todas mis fuentes). Lo importante que debe recordar es que primero importa las fuentes.
Tenga en cuenta que cualquier componente que importe a su aplicación React debe importarse después de la importación del estilo. Especialmente si esos componentes también importan sus propios estilos. De esta forma puede estar seguro del orden de los estilos. Esta es la razón por la que es mejor importar fuentes en la parte superior de su archivo principal (no olvide verificar su archivo CSS empaquetado final para verificar si tiene problemas).
Hay algunas opciones que puede pasar a la API de fuentes de Google para que sea más eficiente al cargar fuentes, etc. Consulte la documentación oficial: Comience con la API de fuentes de Google
Edite, tenga en cuenta: si se trata de una aplicación "sin conexión", es posible que deba descargar las fuentes y cargarlas a través de Webpack.
<link>
en el encabezado de la página, no en tu aplicación de reacción, ¿correcto? ¿Especifica el enfont-family
cualquier otro lugar de su hoja de estilo o en sus elementos directamente?