Evita los errores más comunes en la carga de web fonts
HTML-код
- Опубликовано: 22 сен 2024
- Nos gusta mucho usar distintas tipografías web, pero pueden tener un coste de performance elevado. Vamos a ver cómo cargar las web fonts de forma óptima para evitar layout shifts y ofrecer una buena experiencia.
Todo esto y más en el curso de Web Performance 👉 pro.codely.tv/...
{▶️} CodelyTV
├ 🎥 Suscríbete: ruclips.net/user/c...
├ 🐦 Twitter CodelyTV: / codelytv
├ 🌶 Twitter Núria: / nuria_codes
├ 🙋🏻♂️ Twitter Nino: / ninodafonte
├ 📸 Instagram: / codelytv
├ ℹ️ LinkedIn: / codelytv
├ 🟦 Facebook: / codelytv
└ 📕 Catálogo cursos: bit.ly/cursos-...
Fahh.. unos capos 👌
Máquinas!
Porque mi fuente no carga en dispositivos móviles?
Son unos cracks! Estoy a nada de empezar a comprar cursos
Llegar a controlar cada detalle, hasta letra a letra..
Me lo estoy inventando, pero igual para alfabetos como chino que tienen versiones simplificadas puede ser mucho más interesante que para nosotros
Que tema light usa nuria ?
I want a T-shirt with Nuria's ... 😉
jeje, buena performance de quitar las letras no utilizadas en la tipografia de un titulo ;) gracias
Obviamente lo mejor en cuanto a rendimiento es no cargar nada externo y quedarte con una "safe font". Llevo días peleándome para mejorar el LCP y el CLS, y resulta que cargar fuentes desde google fonts está haciendo que Google ya nos esté penalizando. Solución? de momento quitarlas mientras replanteamos todo. Como bien ha dicho Nuria a lo mejor nos estamos flipando y eso está fastidiando muchísimo el rendimiento de muchas webs y en consecuencia probablemente también el SEO. En todo caso como también comenta Nuria no es solo una decisión técnica o solo de diseño sino que hay que ver como llegar a un consenso entre las dos partes para que sea bonito pero al mismo tiempo sea lo más usable posible y que cargue igualmente lo más rápido posible.
Os ha faltado comentar algunos temas como los parámetros preconnect o preload y explicar mejor los tipos de fuentes que existen, qué es una safe font, etc. Pero supongo que todo esto es lo que explicáis en el curso. Muy buen artículo en cualquier caso.
Saludos y gracias por el aporte.
Nunca lo he programado pero se podría hacer con JS, un subrayado del texto que se estaba mostrando antes de moverse todo de sitio para que lo encuentres fácil no? A alguien le parece interesante?
no seria mejor cargar un @font-face{} y poner lo q realmente vas a usar para no tener que hacer peticiones a google? Escucho opiniones