En una publicación anterior, escribí sobre las fuentes del sistema y sus ventajas sobre las fuentes web. Apoyé el enfoque de "fuentes del sistema primero", argumentando que, en comparación con las fuentes del sistema, las fuentes web (a) pueden afectar negativamente el rendimiento, (b) usar más datos y (c) aumentar el consumo de energía de su sitio. Pero una web sin fuentes web sería mucho menos interesante; tal vez al usar fuentes web de manera más responsable, podamos obtener todos sus beneficios y minimizar las desventajas.
En la primera parte de este tutorial, cubriré cinco métodos para mejorar el rendimiento de las fuentes web que creo que tendrán el mayor impacto con el menor esfuerzo.
Crédito a Zach Leserman, quien escribió extensamente sobre fuentes web en su sitio. Vale la pena leer todos sus artículos, especialmente La lista de verificación de carga de fuentes y Una guía completa para las estrategias de carga de fuentes (que es realmente muy completa), los cuales resultaron ser muy útiles mientras escribía esta publicación.
, , :
(typeface) — , . ( , , ). Helvetica — . .
(font) — . , , , , «Helvetica Bold Italic 10 ». , ( , ).
1.
Web Open Font Format 2.0 (woff2) es el formato de archivo más pequeño y eficiente para fuentes web en el momento de escribir este artículo. Cuando use @ font-face at-rules en CSS, asegúrese de que la fuente woff2 se represente antes que los formatos de archivo más antiguos y menos eficientes como ttf. El navegador utilizará la primera fuente de la lista que comprenda, incluso si es un archivo más grande.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); }
Si no necesita la compatibilidad con IE8, no necesita nada más que woff2 y woff. Si no necesita el soporte de IE11, solo necesita woff2.
Si solo tiene un archivo ttf (por ejemplo, si descargó una fuente de Google Fonts), deberá convertirlo usando una herramienta como Online Font Converter . Si no está utilizando una fuente de código abierto, primero verifique si la licencia lo permite.
2. Utilice el descriptor font-display
Hay dos siglas que verá a menudo cuando comience a comprender las estrategias de carga de fuentes:
- Flash of Invisible Text (foit) es el período de tiempo durante el cual el texto es invisible antes de que el navegador cargue la fuente web.
- Destello de texto sin estilo (fout) es el período de tiempo que el texto se representa con la fuente alternativa antes de que el navegador cargue la fuente web.
Nada de lo anterior es perfecto, pero si está utilizando fuentes web, es probable que algo de esto suceda la primera vez que un usuario visite su sitio web (con suerte, cuando se cargue la segunda página, el navegador podrá servir las fuentes desde su cache). Si tomamos nuestro tipo de letra en regla de la anterior y agregamos un descriptor de visualización de fuente , podemos decirle al navegador cuál preferimos.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); font-display: swap; }
Hay cinco posibles valores de visualización de fuentes: primero, auto es el comportamiento predeterminado del navegador (la mayoría de los navegadores prefieren foit). Aquí hay cuatro más:
intercambio
swap le dice al navegador que queremos que el texto se muestre usando la fuente alternativa hasta que se cargue la fuente web (es decir, preferimos usar fout). Ya sea que demore 5 segundos o 5 minutos, tan pronto como se descargue la fuente, será reemplazada. Esta es una buena base porque permite a los visitantes del sitio web comenzar a leer su contenido de inmediato, pero asegúrese de seleccionar una opción similar (nosotros: en la segunda parte de esta serie de artículos, cubriremos las opciones de respaldo) para evitar grandes desalineaciones de diseño cuando cambiar fuentes.
cuadra
Si preferimos que el navegador oculte el texto hasta que se cargue la fuente web (es decir, preferiríamos foit), podemos usar font-display: block. Sin embargo, el texto no permanecerá invisible para siempre: si la fuente no se carga durante un período determinado (generalmente tres segundos), el navegador seguirá usando la fuente alternativa, reemplazándola con la fuente web después de que se haya cargado.
Si cree que esta es la mejor opción porque cree que la imagen se ve mal, recuerde que cuando el texto es invisible, su página no se puede usar y su contenido no se puede leer.
retroceder
El respaldo es similar al intercambio con dos diferencias:
- Comienza con un período de "bloque" increíblemente pequeño (~ 100ms) cuando el texto está oculto, después del cual se muestra la fuente alternativa.
- Si la fuente web no se carga durante un período corto de tiempo (~ 3 s), se utilizará la fuente alternativa hasta el final de la página.
Si no le preocupa si un usuario ve su fuente web la primera vez que visita su sitio (probablemente no le importe mucho), la alternativa es una buena opción.
Opcional
opcional es similar a la reserva, pero le da a la fuente un período de tiempo muy corto (~ 100 ms) para cargar, después del cual no será reemplazada. Sin embargo, tiene una función adicional que permite al navegador decidir cancelar la solicitud de fuente si la conexión es demasiado lenta para cargar la fuente.
foit/fout — , . ( . - Mitt Romney). JavaScript ( ).
3.
Para minimizar el período foit / fout, queremos cargar nuestros archivos de fuentes web lo más rápido posible. Usando
link rel = "preload"
en nuestro html
head
, podemos decirle al navegador que comience a buscar nuestras fuentes antes. Agregue la siguiente etiqueta en la parte superior de su
head
(antes de cualquier CSS) estableciendo un atributo
href
para la URL de su archivo de fuente:
link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin
Al agregar esta etiqueta, le estamos diciendo al navegador que comience a descargar nuestro archivo de fuente ahora mismo, mientras que normalmente no lo hará. comience hasta que encuentre el enlace a una fuente específica en su CSS y no encuentre el elemento dom que lo usa.
Los navegadores suelen ser lo suficientemente inteligentes como para cargar fuentes solo cuando sea necesario en la página actual. El uso de la precarga anula este comportamiento, lo que obliga al navegador a descargar la fuente incluso cuando no está en uso. Por esta razón, siempre precargue solo un formato de cada fuente (woff2, si tiene uno).
Cuantas más fuentes precargue, menos beneficio obtendrá de este método, así que prefiera las fuentes que aparecen "arriba de la página" (los primeros 100vh que el usuario ve sin desplazarse).
Puede leer más sobre la precarga en este artículo de Yoav Weiss: Precarga: ¿Para qué sirve?
4. Recoge los archivos de fuentes
Al crear un subconjunto de la fuente, podemos generar un nuevo archivo de fuente más pequeño que solo incluye los glifos (un glifo es un solo carácter o carácter) que necesitamos. He utilizado la herramienta de fuente Subsetter En Todos Fuentes para que coincida con la Negrita espacio Grotesk la fuente utilizada para los títulos en este sitio para incluir sólo los caracteres latinos básicos. Esto redujo el tamaño del archivo de la versión woff2 de 30 KB a 7 KB.
Subset es una herramienta poderosa, pero tiene algunos inconvenientes potenciales. Si está creando un sitio web que muestra contenido generado por el usuario, nombres de personas o nombres de lugares, debe usar caracteres que no sean las 26 letras estándar, 10 números y algunos caracteres comunes en la escritura en inglés.
Como mínimo, debes pensar en los signos diacríticos: glifos que aparecen encima o debajo de un carácter que alteran su pronunciación. Son comunes en idiomas que incluyen francés, español, vietnamita y texto transliterado (o "romanizado") de alfabetos como el griego o el hebreo; también aparecen en préstamos (palabras tomadas de otro idioma).
Si está subconjuntando demasiado, incluso podría terminar con una combinación de fuentes en una palabra.
Si quisiera escribir sobre el hágalo usted mismo, podría tener que personalizar el archivo de subconjunto de fuentes que uso para los títulos. Tenga en cuenta que las formas "â" y "é" (con acentos) no coinciden con las versiones sin acentos de estas letras.
Afortunadamente, no es necesario que verifique manualmente cada página de su sitio en busca de caracteres diferentes. GlyphhangerEs una herramienta de línea de comandos que hace dos cosas: primero, rastrea sus páginas web y determina los rangos de caracteres Unicode en uso (estos rangos corresponden al script o idioma, por ejemplo, latín básico, cirílico, tailandés); en segundo lugar, es un subconjunto del archivo de fuentes, que genera una nueva versión que contiene solo caracteres de los rangos especificados.
Comenzar con Glyphhanger puede ser un poco complicado (necesitas python y pip). Sarah Sueidan explica cómo lo hizo en este artículo: Cómo configuro Glyphhanger en macOS para optimizar y convertir archivos de fuentes para la Web .
Al igual que con el cambio de formatos de archivo, asegúrese de que su licencia de fuente permita un subconjunto de archivos.
5. Coloque las fuentes usted mismo
Esta no es una regla universal, como la mayoría de las demás. Hay dos buenas razones por las que es posible que desee utilizar un servicio alojado como Google Fonts o Adobe Fonts :
suele ser la forma más barata o la única legal de utilizar determinados tipos de letra en Internet. Si no tiene más remedio que utilizar uno de estos servicios, compruebe si admite la creación de subconjuntos o la adición de descriptores de visualización de fuentes.
Son útiles: copiar y pegar una línea de html en su sitio será más rápido que la alternativa: descargar los archivos de fuentes, convertir un subconjunto de los archivos de fuentes y luego escribir @ font-face at-rules para cada peso y estilo.
Si todavía usa Google Fonts simplemente por conveniencia, eche un vistazo a google-webfonts-helper . Esta herramienta le permite crear su propio paquete de fuentes web a partir del conjunto completo de fuentes de Google, definir los pesos y conjuntos de caracteres que desee y luego proporcionarle una descarga que contiene todos los archivos css y de fuentes (en los últimos formatos) que necesita.
Mito n. ° 1 sobre las fuentes web Es
posible que haya escuchado la afirmación (que se repite en Google Fonts) de que si un usuario ha visitado anteriormente un sitio que descarga las mismas fuentes de la misma fuente, el navegador no necesita descargarlas nuevamente porque están en caché ...
Una vez, esto pudo haber sido cierto, pero no puedo encontrar evidencia de que este sea un fenómeno lo suficientemente común como para afectar algo. De hecho, tanto Google Chrome como Safari prohíben explícitamente compartir recursos de terceros almacenados en caché entre dominios debido a problemas de seguimiento.
Aquí hay una lista de buenas razones para no utilizar el servicio alojado y, en su lugar, alojar las fuentes usted mismo:
Actuación
Encontrar un dominio lleva tiempo, puede utilizar sugerencias de recursos para aliviar la situación, pero siempre el rendimiento siempre se degrada al abrir una conexión TCP a un nuevo dominio. Esta puede ser la razón por la que algunos de los sitios de Google (incluido web.dev ) ahora usan fuentes nativas en lugar de fuentes de Google.
Confidencialidad
Los servicios de fuentes web de pago, como Adobe Fonts, deben determinar las páginas vistas para los cálculos, pero pueden recopilar más datos de los estrictamente necesarios. Si tiene la opción, cargue fuentes usando css (
link rel = "stylesheet"
) en lugar de JavaScript (
script
) para minimizar la cantidad de datos que un tercero podría recopilar sobre sus usuarios.
Parece que Google Fonts no recopila tantos visitantes del sitio web como direcciones IP y cadenas de agentes de usuario, pero Google no es completamente desinteresado al proporcionar el servicio de forma gratuita. Cada uno de los cincuenta billones de páginas vistas que utilizan las fuentes de Google es un punto de datos que Google no tendría si los sitios web estuvieran usando sus propias fuentes.
Control
Con las fuentes fuera de línea, tiene un control completo sobre cómo carga las fuentes, lo que le permite servir subconjuntos personalizados, definir opciones de visualización de fuentes y especificar cuánto tiempo el navegador debe almacenar en caché los archivos de fuentes.
Fiabilidad
Los servicios de terceros pueden ralentizarse, desconectarse o dejar de funcionar por completo . Con fuentes autohospedadas, mientras su sitio web esté en funcionamiento, sus fuentes estarán disponibles.
Conclusión
Cada uno de estos pasos puede tener beneficios por sí mismos, pero usarlos juntos puede generar grandes mejoras. Si decide seguir algunos de los pasos de este artículo, intente utilizar una herramienta como Lighthouse o Web Page Test antes y después de realizar los cambios para ver el efecto de cada cambio individual.
En la segunda parte, veremos algunas de las técnicas más avanzadas, incluidas las estrategias de carga de fuentes JavaScript y las fuentes variables. También veremos la importancia de elegir las fuentes alternativas adecuadas e introduciremos un nuevo acrónimo: FOFT, Flash Of Faux Text.
Para no perder mis hallazgos de diseño en toneladas de marcadores en mi computadora, creé el canal Drin Design Telegram . Todos los materiales interesantes y útiles (tutoriales, artículos, enlaces a cuentas de tipos geniales) que encuentre por mí mismo, los publicaré allí. Ayudar a sí mismo.