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.