Estoy tratando de configurar Google Fonts en mi proyecto React, pero no puedo anular las familias de fuentes originales de React.

Siguiendo algunos tutoriales, inserté la familia de fuentes que quiero en index.css:

body {
  /* margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Lemonada'
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-family: 'Lemonada', 
    cursive;
}

Comenté las fuentes originales con fines de prueba.

Sin embargo, las fuentes originales no se sobrescriben:

enter image description here

Si inspecciono el archivo, veo esto:

enter image description here

Como puede ver, todas las fuentes comentadas todavía están ahí, además hay muchas otras cosas que no existen en index.css. Aparentemente proviene de algún archivo style.css, pero no tengo idea de dónde encontrarlo.

Si desmarco este estilo, obtengo la familia de fuentes que quiero:

enter image description here enter image description here

Y, por supuesto, también agregué la api a mi archivo index.html.

<link href="https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap" rel="stylesheet">

Me gustaría poder agregar nuevas familias de fuentes o al menos anular las originales.

¿Qué estoy haciendo mal?

0
Berg_Durden 11 ago. 2020 a las 01:05

2 respuestas

La mejor respuesta

Seguí investigando y encontré dos posibles soluciones:

1- En lugar de usar index.css, coloco la familia de fuentes directamente dentro del archivo css correspondiente al componente que quiero usar la fuente, en este caso este es el archivo Layout.css.

2- Descubrí esta biblioteca y también funciona y parece ser muy buena: https://www.npmjs.com/package/react-google-font-loader

0
Berg_Durden 10 ago. 2020 a las 22:27

Asegúrese de que <link href="https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap" rel="stylesheet"> esté cargado antes del de su archivo css.

También intente cambiar la línea a

  font-family: 'Lemonada' !important, 
1
DrSmrtnik 10 ago. 2020 a las 22:18