Importé una fuente de Google que se muestra perfectamente en el escritorio y en todos los navegadores, pero cuando pruebo en el móvil, obtengo las fuentes predeterminadas.
Aquí está mi archivo App.css:
@import url("https://fonts.googleapis.com/css2?family=Turret+Road:wght@3000&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Turret Road" !important; font-weight: 3000; font-style: normal; }He analizado preguntas similares, pero las pocas soluciones que hay no parecen funcionar con React. ¿Algunas ideas?
Lo que debe hacer es poner las herramientas de desarrollo en modo móvil, luego inspeccionar el texto que no tiene la fuente correcta.
estilo de herramientas de desarrollo
Luego vaya a la pestaña calculada y desplácese hacia abajo hasta la familia de fuentes. Podrá ver todos los estilos de la competencia, y el que está en la parte superior tiene la prioridad más alta. Podrá ver qué se está sobrescribiendo y eliminarlo, o aumentar la especificidad de su css apuntando a la fuente.
Cambie ':wght@3000' a '300' también, agregue cursiva antes de la etiqueta importante para asegurarse de que se muestre correctamente.
font-family: 'Turret Road', cursive !important;