Una guía para optimizar las fuentes web

La tipografía es fundamental para un buen diseño web: la legibilidad, la legibilidad, la accesibilidad y la marca son cruciales para la transmisión exitosa de su mensaje. Las fuentes web permiten todo esto, permitiendo que el texto sea seleccionable, buscado y amplio, al tiempo que ofrece una línea consistente y clara, independientemente del tamaño y la resolución de la pantalla. Sin embargo, esta experiencia mejorada del usuario puede tener un costo de rendimiento: cada fuente que use es un recurso adicional que los visitantes deben descargar al acceder a su sitio, agregando tiempo para cargar sus páginas.
Pero el uso de fuentes web no significa que sus páginas deben ser lentas. De hecho, el uso de fuentes optimizadas junto con una estrategia cautelosa sobre cómo se cargan y aplican a su sitio puede ayudar a reducir el tamaño total de la página y mejorar la velocidad de la página. Además, la optimización de la fuente web mejorará las calificaciones centrales de la web vital, en particular, la métrica de CLS. ¿Qué son las fuentes web? Hay dos tipos básicos de fuentes utilizados en la web:
Fuentes seguras para la web: estas son fuentes estándar que vienen preinstaladas en dispositivos, incluidos Times New Roman, Arial y Courier.
Fuentes web: estas son fuentes que no están previamente y deben ser descargadas por el navegador antes de mostrarse.
Para el ojo habitual, las fuentes web son una colección de letras del alfabeto, al menos para los hablantes de inglés. Pero se profundizan y en realidad son una colección de Glife, y cada glif es una forma vectorial que describe una letra o símbolo en muchos idiomas, no solo el inglés.
Dos variables determinan el tamaño de un archivo de fuente particular: la complejidad de las rutas vectoriales de cada glif y el número de glifs de una determinada fuente. Por ejemplo, Open Sans, una fuente web popular, contiene 897 Glife, incluidos personajes latinos, griegos y cirílicos.

Open Sans contiene cientos de Glife. Alojamiento y entrega de fuente web Cuando elige usar una fuente web, debe almacenarse en algún lugar. Hay dos opciones para alojar la fuente web:
Autoguardia: host recursos de fuentes en su servidor web junto con el resto de los archivos de su sitio web.
Alojamiento de terceros: usando un servicio de fuentes como Adobe Typekit, Fonts.com o Google Fonts.
Hay ventajas y desventajas que vienen con cada una de estas opciones. Si bien el uso de una solución de terceros podría ser más fácil de configurar, significa que no tiene control sobre el rendimiento y la seguridad o incluso si el servicio disminuye. En 2015, cuando los servidores Typekit se derrumbaron, los sitios de todo el mundo se vieron obligados a lidiar con Arial y Georgia.
Pero si no le preocupa las interrupciones, Typekit solo se ha detenido durante cuatro horas, la velocidad o la entrega, el alojamiento de tercera parte podría ser su opción favorita si no desea lidiar con los recursos de fuentes de auto -hitch. Los consejos para optimizar la optimización de fuente de la fuente web son un tema complejo y hay muchas formas diferentes de optimizar la entrega de fuentes. La forma exacta en que optimiza sus fuentes dependerá de sus preferencias de alojamiento, diseño y servidor de su sitio, sus habilidades técnicas y hasta qué punto está dispuesto a llegar para mejorar el rendimiento de la fuente.
Antes de comenzar a optimizar las fuentes, es una buena idea saber exactamente cuánto usa. Una manera fácil de hacerlo es ejecutar su sitio a través de herramientas de prueba de velocidad, como Gtmetrix o Pingdom, para que pueda analizar el diagrama de cascada resultante y ver las solicitudes HTTP. A veces, los complementos y los temas pueden usar fuentes que no conoce. Aquí hay algunos pasos que puede seguir para optimizar la entrega de sus fuentes 1. Verifique y monitoree el uso de la fuente usando el navegador para el CSS @Font-Face ahora generalizado, el uso de la fuente web personalizada ha explotado. Según el archivo HTTP, el 67% de las páginas web ahora usan fuentes personalizadas, los sitios web que tienen un promedio de cuatro solicitudes HTTP. Los jurados establecen exactamente cuántas fuentes son demasiadas, aunque la regla general es que tres son mucho y lo mejor es Quédese con dos, uno para títulos y otro para el cuerpo del texto. No solo la reducción mínima del número de fuentes web que usa ayuda a reducir el número total de solicitudes HTTP, sino que también garantiza un diseño más eficiente y consistente del sitio. Tome Lingscars, por ejemplo. Tiene tantas fuentes y otros elementos ridículos que me dan ganas de rascarme los ojos. Afortunadamente, solo utiliza fuentes seguras para la web para que se cargue más rápido.
También es importante tener en cuenta las variaciones, como los pesos cursivos, audaces y otros. Cada variación de fuente agrega peso al tamaño del archivo, así que trate de evitar agregar los que no tiene la intención de usar. 2. Subcontrole los recursos de fuentes Si no proporciona traducciones en su sitio, es mejor mantener sus conjuntos de personajes como mínimo. Esto significa la entrega de personajes solo para los idiomas que necesita. Como explica Google Web Guru Ilya Grigorik, muchas fuentes pueden subestimarse o incluso dividirse en varios intervalos Unicode para proporcionar solo los caracteres necesarios para una determinada página. Usando @Font -Facile, puede usar el descriptor Unicode -Range para especificar una lista de valores del intervalo, que puede establecerse en tres formas diferentes: punto de código único (por ejemplo, u+416): indica un solo personaje.
Intervalo de intervalo (por ejemplo, U+400-4ff): indica los puntos de código de inicio y finalización de un rango de caracteres.
Intervalo comodín (por ejemplo, u+4 ??) 😕 Los personajes indican cualquier dígito hexadecimal.
Por ejemplo, así es como dividiría a la increíble familia de fuentes en subconjuntos latinos y japoneses, cada uno de ellos que el navegador descargaría según sea necesario por el usuario:
@FONT-FACING {FONT-FAMILY: ‘Awesome Font’; Estilo de fuente: normal; Font-peso: 400; Src: local (‘font’ impresionante ‘), url (‘ /fonts/awesome-l.woff2 ‘) format (‘ woff2 ‘), url (‘ /fonts/awesome-l.wof ‘) format (‘ wof ‘),), URL (‘/fonts/AWASE-L.TTF’) format (‘trueType’), url (‘/fuente/impresionante- Unicode -Range: U+000-5ff; / * Glifos latinos */} @font -face {Font -Family: ‘Awesome Font’; Estilo de fuente: normal; Font-peso: 400; Src: local (‘font’ impresionante ‘), url (‘ /fonts/awesome-jp.wof2 ‘) format (‘ woff2 ‘), url (‘ /fonts/awesome-jp.wof ‘) format (‘ wof ‘),, Url (‘/fonts/awesome-jp.ttf’) format (‘trueType’), url (‘/fonts/AWASE-JP.EOT’) format (‘incrustado-opentype’); Unicode -Range: U+3000-9FFF, U+FF ??; / * Glifos japoneses */} Grigorik dice que cuando define subconjuntos, es importante optimizar para la reutilización de fuentes. Por ejemplo, no descargue un conjunto diferente superponiendo caracteres en cada página. Es una buena práctica subestimar sobre la base de un guión, como latín, cirílico, etc.
Si el único propósito de una fuente web de Google es mostrar el título de su sitio, aquí hay un consejo: descargue solo los caracteres específicos utilizados en el título. Puede hacerlo agregando & text = seguido de las letras específicas que desea descargar al final de una URL de Google Fonts.
Por ejemplo, si desea cargar el blog Word usando Montserrat, lo haría usando lo siguiente:
!
Este enlace le dice a Google Fonts CDN que proporcione solo la letra de mayúsculas y mayúsculas y la minúscula L, O y G, ignorando a todos los demás caracteres. Proporcione formatos de fuente optimizados para cada navegador Hay cuatro contenedores de fuentes utilizados en la web: EOT, TTF, WOF y WOF2.

Incorporar el tipo abierto (EOT): Microsoft ha diseñado este formato, que ahora es utilizado solo por los navegadores de IE.
Tipo verdadero de la fuente (TTF): un formato que ha existido desde finales de la década de 1980, que tiene apoyo parcial para IE.
Formato de fuente web Web (Woff): un formato desarrollado en 2009, que es esencialmente Opentype o Trurtype con compresión y metadatos adicionales. Disfruta de un amplio apoyo, pero no está disponible en algunos navegadores más antiguos.
Formato de fuente web Web (Woff2): una mejora en Woff que ofrece, en promedio, una reducción del 30% en el tamaño del archivo. La asistencia sigue siendo una actividad continua para muchos navegadores.
Desafortunadamente, no hay un formato único que funcione en todos los navegadores, lo que significa que debe proporcionar más formatos. Cuando decide exactamente qué formatos usar, es útil verificar Google Analytics para ver qué navegadores y dispositivos son los más populares entre sus visitantes.
Si sus visitantes usan en su mayoría navegadores modernos, puede escapar con la especificación de solo dos formatos, de la siguiente manera:
@font -face {Font -Family: ‘Montserrat’; Src: local (‘Montserrat’), local (‘Montserrat’), Url (‘Format’ Fonts/Montserrat.wof2 ‘) format (‘ WOF2 ‘), URL (‘ FONTS/MONTSERRAT.WOF ‘) format (‘ woff ‘); }
El primer formato, Woff2, le brinda la ventaja de una compresión adicional. Su navegador no acepta Woff2, regresa a Woff, quien también tiene una buena compresión, junto con el apoyo a las últimas versiones de todos los principales navegadores. Sin embargo, hay una falta de soporte para los navegadores Mini, IE8 Opera y Android más antiguos. Aunque esto podría ser un problema, estos navegadores utilizarán automáticamente fuentes web seguras. 4. Dé la prioridad local () en la lista SRC, aunque esperaría que un visitante del sitio tenga fuentes preinstaladas web seguras, es imposible predecir si ya tiene una determinada fuente web. Llévame, por ejemplo. Tengo docenas de fuentes web instaladas en la computadora, por lo que cuando visito sitios web, no tiene sentido tener que descargar una fuente web que ya tengo. Otra desventaja es que un espacio vacío (flash de texto invisible, alias FOIT) o un estilo sin estilo (flash de contenido no establecido, alias Fouc), se muestra a medida que la fuente se carga en el navegador. Esto es absolutamente inútil para los usuarios que ya tienen fuente instalada localmente en su computadora. La forma de omitir esto es bastante simple: use localmente () para verificar si una fuente ya está en el sistema del usuario. Liste local (‘nombre de fuente’
) Primero en su lista SRC garantiza que las solicitudes HTTP no estén hechas para fuentes que ya existan. 5. Ponga la solicitud de fuente temprano de forma predeterminada, @facing Lazy carga las fuentes. Esto significa que las solicitudes de fuentes se posponen hasta que se carga el contenido de su página. Esto es algo bueno en términos de velocidad y rendimiento y si aprecia las técnicas de mejora progresiva. Pero si la experiencia del usuario es una prioridad y no le gusta la experiencia inquietante de FOIT, es posible que desee reemplazar este comportamiento por ciertas fuentes, como el texto del texto, por ejemplo. Puede personalizar la carga y la reproducción de las fuentes utilizando , desaprobación de fuentes o el agua de carga de fuentes. Diga cómo usarla. Aquí le mostramos cómo usarlo: html:
CSS:
@FONT-FACING {FONT-FAMILY: ‘Awesome Font’; Estilo de fuente: normal; Font-peso: 400; Src: local (‘font’ impresionante ‘), url (‘ /fonts/awesome-l.woff2 ‘) format (‘ woff2 ‘),/ * se precargará */url (‘ /fonts/awesome-l.wof ‘) ) format (‘woff’), url (‘/fonts/awesome-l.ttf’) format (‘trueType’), url (‘/fonts/impresionante- Unicode -Range: U+000-5ff; / * Glifos latinos */}
En general, es mejor poner su @Font-Facility sobre todas las etiquetas . Para obtener más información sobre cómo usar la pantalla de fuentes, consulte `Display de fuentes en CSS-Tarks para masa. 6. La memoria correcta en caché es una necesidad porque las fuentes son recursos estáticos que no se actualizan con frecuencia, se pueden almacenar en caché local en el navegador, evitando que los usuarios descarguen sus fuentes nuevamente la próxima vez que su sitio acceda a esto en orden, La cantidad de datos que el navegador del usuario tiene que descargar, así como se reduce la cantidad de solicitudes HTTP. La Guía de Fundamentos web de Google recomienda que haga que sus servidores proporcionen una marca de tiempo máximo a largo plazo y un símbolo de revalidación para permitir una reutilización efectiva entre diferentes páginas en su sitio, también debe evitar almacenar fuentes utilizando localsestage o indexeddb, porque cada una de ellas tiene sus propios problemas de rendimiento. Tenga en cuenta que el almacenamiento del navegador solo se puede aplicar a las fuentes que transmite desde su propio dominio o CDN: no tiene control sobre el almacenamiento de caché de las fuentes proporcionadas de terceros, como Google Fonts, etc.
Conclusión Como se mencionó anteriormente, la optimización de la fuente web es un tema extremadamente complejo.Hay tantas técnicas que podría usar para darle mejor las fuentes, y este artículo solo rasca la superficie.Por lo tanto, le animo a que descubra más y descubra qué métodos de optimización funcionan mejor para usted y su sitio web.Al optimizar las fuentes web, es posible mejorar la apariencia acumulada, uno de los puntajes centrales de la web.Aquí hay algunos recursos adicionales para optimizar las fuentes web. Optimización de la fuente web – Google Fundaments
Opciones y velocidad para Font Web – Varvy.com
Optimización de fuentes web – Nerdwallet
Estudio de caso – Análisis de rendimiento de fuente web – KeyCDN
Una guía para optimizar las fuentes web en WordPress – Kinsta
¿Cuántas fuentes usas?¿Has pensado en optimizar las fuentes web?¡Deja un comentario a continuación!