¿Precargar fuentes @font-face?

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" precarga " 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 puedes ocultar el contenido de la página y mostrarlo cuando esté listo.

2017: Ahora tienes precarga

MDN: El valor de precarga del atributo rel del elemento le permite escribir solicitudes de recuperación declarativas en su HTML, especificando recursos que sus páginas necesitarán muy pronto después de la carga, que usted por lo tanto, desea comenzar a precarga temprano en el ciclo de vida de una página cargar, antes de que la maquinaria de renderizado principal del navegador entre en funcionamiento. Este asegura que se ponen a disposición antes y son menos propensos a bloquear la página primer renderizado, lo que lleva a mejoras de rendimiento.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

Compruebe la compatibilidad del navegador.

Es más útil para la precarga de fuentes (sin esperar a que el navegador la encuentre en algún CSS). También puede precarga algunos logotipos, iconos y scripts.

Otras técnicas pro/cons se discuten aquí (no es mi blog).

La carga previa de la fuente adecuada es un gran agujero en la especificación HTML5. He pasado por todo esto y la solución más confiable que he encontrado es usar la fuente.js:

Http://pomax.nihongoresources.com/pages/Font.js /

Puede usarlo para cargar fuentes utilizando la misma API que usa para cargar imágenes

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

Es mucho más simple y más ligero que El enorme cargador Webfont de Google

Aquí está el repositorio de github para Letra.js:

Https://github.com/Pomax/Font.js

Esto debería resolver su problema.

Para responder a tu pregunta inicial: sí puedes. Solo los navegadores Gecko y WebKit lo soportan actualmente.
Solo necesita agregar etiquetas de enlace en su cabeza:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">

Hice esto agregando alguna letra en mi documento principal y lo hice transparente y asigné la fuente que quería cargar.

Por ejemplo

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>

A través de Google webfontloader

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});

Recientemente estaba trabajando en un juego compatible con CocoonJS con DOM limitado al elemento canvas-aquí está mi enfoque:

El uso de fillText con una fuente que aún no se ha cargado se ejecutará correctamente, pero sin retroalimentación visual - por lo que el plano del lienzo permanecerá intacto - todo lo que tiene que hacer es comprobar periódicamente el lienzo para cualquier cambio (por ejemplo, bucear a través de getImageData buscando cualquier píxel no transparente) que ocurrirá cuando la fuente se cargue correctamente.

I he explicado esta técnica un poco más en mi reciente artículo http://rezoner.net/preloading-font-face-using-canvas,686

Google tiene una buena biblioteca para esto: https://developers.google.com/webfonts/docs/webfont_loader Puedes usar casi cualquier tipo de letra y la lib agregará clases a la etiqueta html.

¡Incluso te da eventos de javascript cuando las fuentes certrain están cargadas y activas!

No se olvide de servir sus archivos de fuentes gzipped! sin duda va a acelerar las cosas!

Utilice la API de carga de fuentes CSS estándar .

Espere a que (all) se carguen las fuentes y luego muestre su contenido:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

CodePen de demostración.