Optimizar las fuentes web de forma sencilla

No hay duda de que las fuentes web son un enorme enriquecimiento para el diseño web, y se ha vuelto difícil imaginarlo sin ellas. Después de todo, las fuentes web fueron las que terminaron con la tipografía uniforme con Verdana y sus contemporáneos. Dado que las fuentes web deben descargarse, a diferencia de las fuentes del sistema, son un recurso adicional que genera un tráfico de datos adicional. Los siguientes consejos lo ayudarán a optimizar sus fuentes web y asegurarse de que se carguen más rápido.

Restricción del conjunto de caracteres de la fuente

Las fuentes bien construidas pueden tener cientos de caracteres. Esto incluye letras específicas del idioma, como la diéresis alemana o la «ß» y los caracteres aún más exóticos de otros idiomas. Si solo publica en inglés en su sitio web, debe centrarse en el conjunto de caracteres que renuncia a todas las letras que no son necesarias.

Si solo usa una fuente en mayúsculas, por ejemplo, para encabezados, debe tachar las minúsculas del conjunto de caracteres. Esto hace que los archivos sean lo más pequeños posible. Especialmente cuando se trata de la web móvil, los archivos pequeños siguen siendo necesarios.

Generador de fuentes web de Fontsquirrel

La mayoría de los proveedores de fuentes web como MyFonts, por ejemplo, ofrecen un generador de fuentes web que le permite definir el conjunto de caracteres usted mismo. Allí, puede elegir qué idiomas se deben admitir. También se puede encontrar un generador de fuentes web de libre acceso en fuenteardilla. Cargue una fuente de escritorio y genere las fuentes web adecuadas en todos los formatos estándar.

Aunque todavía se utilizan muchos formatos web diferentes, como EOF y TTF, el formato WOFF se ha convertido en el estándar en este momento. Ya hay un sucesor en WOFF2, que crea archivos de fuentes mucho más pequeños. Por lo tanto, debe considerar tanto WOFF como WOFF2. Los navegadores que ya admiten el nuevo formato pueden descargar archivos más pequeños.

Los generadores de fuentes web como el de Fontsquirrel ya son compatibles con el nuevo formato.

Restricción del conjunto de caracteres a través de CSS

Los navegadores modernos también admiten otra opción para restringir el conjunto de caracteres de un archivo de fuente, conocido como atributo CSS «rango Unicode». Se puede utilizar para definir caracteres individuales o áreas de caracteres de una fuente. Luego, el navegador solo descargará las fuentes que se encuentren dentro del área Unicode definida.

unicode-range: U+0025-00FF;
unicode-range: U+4??;
unicode-range: U+0025-00FF, U+4??;

En el primer ejemplo, creamos un área Unicode que contiene los puntos de código «U+0025» a «U+00FF». En el segundo ejemplo, se coloca un comodín. En el ejemplo final, las dos primeras áreas se combinan.

Uso de las «langostas» para el área Unicode «U+0026» (ampersand)

Lamentablemente, no todos los navegadores admiten esta característica. Internet Explorer y Edge, ambos solo muestran los símbolos que están en el área Unicode definida en el navegador, pero descargan el conjunto de caracteres completo.

Compresión y almacenamiento en caché de fuentes

Por último, pero no menos importante, hay una opción del lado del servidor para comprimir una fuente. Por ejemplo, «.htaccess» le permite asegurarse de que los archivos de fuentes se reduzcan mediante el desinflado antes de enviarlos al navegador. Esto reduce el tamaño del archivo durante la transferencia, lo que una vez más reduce la cantidad de archivos que deben transferirse.

Además de eso, debe usar «.htaccess» para asegurarse de que sus archivos de fuentes estén almacenados en caché en el navegador. No se producen cambios en lo que respecta a los archivos de fuentes, por lo que se puede configurar un período muy generoso para el almacenamiento en caché.

AddType font/woff .woff
ExpiresByType font/woff "access plus 1 year"
AddOutputFilterByType DEFLATE font/woff

En el ejemplo, se usa «ExpiresByType», de modo que la fuente permanece en caché durante un año y, además, «AddOutputFilterByType» aplica la compresión deflate.

(dpe)