0

Llevo desde hace tiempo con este problema. Estoy haciendo una aplicación para cacharrear con Angular, y cuando importo las fuentes de Google Fonts (Poppins), no logro que el texto se renderice correctamente en el teléfono, sin embargo desde mi equipo se ve perfectamente.

Os muestro cómo se renderizan y después el CSS:

Diferencias entre renderizado desde teléfono y PC

A la derecha es como se vería al cargar desde un equipo (Chrome 87). A la izquierda es como se ve desde mi teléfono (Chrome 87 también).

Se puede ver como el grosor de las letras es menor, la forma de las a, o y c no son geométricas, y la verdad es que estropea mucho el concepto de diseño que ya tenía...

Ahora el CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

A los selectores de h1 a h6 les aplico un font-family: 'Poppins'; pero parece que en el teléfono las está ignorando.

También tengo que decir que estoy usando la biblioteca material icons y funcionan perfectamente, y si depuro por USB/Wifi del teléfono al PC me dice que la fuente es Poppins...

introducir la descripción de la imagen aquí

A ver si alguien es capaz de echarme un cable, porque no sé ni por donde empezar, he mirado la pestaña Network en las devtools de Chrome y no aparece la petición de la fuente, aunque si es un import desde CSS no sé con seguridad si debe aparecer ahí.

1

1 respuesta 1

2

La solución en mi caso era importar el CSS desde una etiqueta link en el index de la aplicación.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

No comprendo muy bien por qué no funciona con el import de CSS, no hay ningún tipo de conflicto, la caché del navegador en el teléfono estaba vacía. Si hago una petición con postman, devuelve un css de imports con enlaces a la fuente pero con formato ttf, si hago la petición desde el navegador, devuelve un css con woff2.

Básicamente ha funcionado al cambiar la forma de importar la fuente. El enlace es el mismo desde el @import y <link>

La pestaña network de las devtools ya muestra la petición de la fuente, así que solucionado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.