Optimizar (reducir) las solicitudes de fuentes web

Mi página de inicio actualmente usa 5 fuentes web; me gustaría que fueran 6 debido al soporte irregular para Helvetica Neue. Una de las fuentes es el ícono 'FontAwesome', las otras 4 solo se usan para una o dos palabras (es decir, tengo un encabezado que dice "Optimización" escrito en letras que parecen una computadora vieja).

2 de estas fuentes están disponibles a través de Google y solicito solo las letras necesarias (y eso funciona muy bien). Sin embargo, los otros 2 son de openfontlibrary.org, y solo están disponibles en un único formato. Lo cual no es un gran problema (de todos modos los necesitaré de forma segura para que las copias locales sean mejores), un rápido con el generador Fontsquirrel.com @ font-face y los tengo en múltiples formatos y el CSS para arrancar.

Y luego pruebo el tiempo de carga de mi página ... ugh. Supongo que sería posible que yo subconjunte mis copias locales, ¿alguien tiene experiencia en esta área?

El uso de fuentes web no estándar tiene un impacto significativo en el rendimiento en los tiempos de carga de la página en comparación con el uso de fuentes estándar del sistema seguras para la web. Este es el caso, independientemente de si está utilizando JavaScript o @ font-face .

Siempre se debe analizar cuidadosamente si se deben usar fuentes web no estándar o no.

Algunas preguntas que debe hacerse al considerar el uso de fuentes web no estándar:

• ¿Los estás usando solo para demostrar que puedes y sabes cómo hacerlo?
• ¿Sirve un propósito en la ejecución de un mejor diseño y proporciona una mejor experiencia de usuario?
• ¿El método utilizado para implementar las fuentes es compatible con varios navegadores?
• ¿Podría ser suficiente una imagen, especialmente si son solo unas pocas palabras en una sola página o solo unas pocas páginas?
• ¿Es la fuente lo suficientemente diferente de las fuentes seguras para la web como para que valga la pena usarla?
• Si la fuente se usa como texto del cuerpo, ¿es fácil de leer o está diseñada para encabezados?

Asegúrese de al menos comprender los fundamentos de la tipografía y cómo impacta en su diseño, y utilícelo para su ventaja.

los otros 4 solo se usan para una o dos palabras

¿Es eso una declaración literal?
Si es así, ¿por qué te molestas en incrustar estas fuentes, subconjuntos o no? Ni siquiera deberías estar optimizando en este caso, solo eliminando . Cree imágenes del texto que necesita y use su técnica de reemplazo de texto favorita. Está agregando solicitudes HTTP y tiempo de descarga a su sitio por unas pocas palabras .

Para seguir, terminé usando las opciones avanzadas del generador @ font-face para configurar mis fuentes, así que solo cargué los caracteres necesarios.

Una de las opciones era codificar Base64 las fuentes (lo que me permitió incrustarlas en mi archivo CSS). Si la memoria sirve, Base64 codifica el .woffy la .ttffuente.

Si bien me gusta admitir tantos usuarios de tantos navegadores como sea posible, decidí que no valía la pena ralentizar a los usuarios de navegadores modernos con datos adicionales, probablemente redundantes, por lo que utilicé Modernizr (que usa yep / nope.js) para Cargue asincrónicamente un CSSarchivo separado con referencias a todos los formatos de fuente según la sintaxis de fuente de balas reforzada .

Iba y venía entre Base64 que codificaba la .wofffuente e incluía el resto de las declaraciones de fuentes en el CSSarchivo primario o solo incluía la Base64 codificada .woffen la primaria CSSy luego incluía los otros formatos en un CSSarchivo que cargué asincrónicamente Modernizr.load.

Prefiero tiempos de carga rápidos a la estética, por lo que FOUC no fue una gran preocupación, pero notaré que la mayoría de los navegadores `` parpadearon '' en las fuentes cuando se cargaron (que fue después de que las fuentes codificadas Base64 en la CSScargaban) asincrónicas.

En el lado positivo, una vez que las fuentes se cargaron y almacenaron en la memoria caché (los encabezados caducan en el servidor) se eliminó el 'parpadeo' y pude cargar conjuntos extendidos de las fuentes para que los usuarios que hablaban otros idiomas (y usaran El widget de traducción de Google incluido) aún vería texto estilizado.

Como este era mi propio sitio, pude experimentar, pero lo hice en gran medida para "presumir", soy más conservador con los sitios de los clientes.

Otra técnica que implementé fue poner todas las .svgfuentes en un solo archivo e identificar cada una con su propia ID en lugar de tener cada una en un archivo separado como produce el generador @ font-face.