Solución:
Desde 2017 tienes precarga
MDN: el valor de precarga del atributo rel del elemento le permite escribir solicitudes de búsqueda declarativas en su HTML, especificando los recursos que sus páginas necesitarán muy pronto después de la carga, que por lo tanto desea comenzar a precargar temprano en el ciclo de vida de la carga de una página, antes La maquinaria de renderizado principal del navegador se activa. Esto asegura que estén disponibles antes y es menos probable que bloqueen el primer renderizado de la página, lo que lleva a mejoras de rendimiento.
<link rel="preload" href="https://foroayuda.es/fonts/myfont.eot" as="font" crossorigin="anonymous" />
Siempre verifique la compatibilidad del navegador.
Es más útil para la precarga de fuentes (sin esperar a que el navegador la encuentre en algunos CSS). También puede precargar algunos logotipos, iconos y scripts.
- Otras técnicas a favor y en contra se analizan aquí (no en mi blog).
- Consulte también la captación previa (similar) y la pregunta SO sobre la precarga frente a la captación previa.
Una técnica simple es poner esto en algún lugar de su índice:
<div class="font_preload" style="opacity: 0">
<span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
<span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
...
</div>
Probado en Chrome 34, Safari 7 y FF 29 e IE 11
Hay algunas técnicas para “precargar” aquí: http://paulirish.com/2009/fighting-the-font-face-fout/
Principalmente engañando al navegador para que descargue el archivo lo más rápido posible.
También puede entregarlo como un uri de datos, lo que ayuda mucho. y también puede ocultar el contenido de la página y mostrarlo cuando esté listo.