¿Cómo saber si ya se ha cargado una fuente (@font-face)?

Ahora en GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js

Básicamente, el método funciona comparando el ancho de una cadena en dos fuentes diferentes. Estamos utilizando Comic Sans como fuente para realizar pruebas, porque es la más diferente de las fuentes seguras para la web y, con suerte, lo suficientemente diferente a cualquier fuente personalizada que vaya a utilizar. Además, utilizamos un tamaño de fuente muy grande, por lo que incluso las pequeñas diferencias serán evidentes. Cuando se ha calculado el ancho de la cadena Comic Sans, la familia de fuentes se cambia a su fuente personalizada, con un respaldo a Comic Sans. Cuando está marcada, si el ancho del elemento de cadena es el mismo, la fuente alternativa de Comic Sans todavía está en uso. De lo contrario, su fuente debería estar operativa.

Reescribí el método de detección de carga de fuentes en un complemento jQuery diseñado para brindarle al desarrollador la capacidad de diseñar elementos según si la fuente se ha cargado o no. Se agregó un temporizador a prueba de fallas para que el usuario no se quede sin contenido si la fuente personalizada no se carga. Eso es simplemente mala usabilidad.

También agregué un mayor control sobre lo que sucede durante la carga de fuentes y en caso de falla con la inclusión de la adición y eliminación de clases. Ahora puedes hacer lo que quieras con la fuente. Solo recomendaría modificar el tamaño de las fuentes, el interlineado, etc. para que la fuente alternativa sea lo más cercana posible a la personalizada, de modo que el diseño permanezca intacto y los usuarios obtengan la experiencia esperada.

Aquí hay una demostración: http://patrickmarabeas.github.io/jQuery-FontSpy.js

Coloque lo siguiente en un archivo .js y haga referencia a él.

(function($) {

    $.fontSpy = function( element, conf ) {
        var $element = $(element);
        var defaults = {
            font: $element.css("font-family"),
            onLoad: '',
            onFail: '',
            testFont: 'Comic Sans MS',
            testString: 'QW@HhsXJ',
            delay: 50,
            timeOut: 2500
        };
        var config = $.extend( defaults, conf );
        var tester = document.createElement('span');
            tester.style.position = 'absolute';
            tester.style.top = '-9999px';
            tester.style.left = '-9999px';
            tester.style.visibility = 'hidden';
            tester.style.fontFamily = config.testFont;
            tester.style.fontSize = '250px';
            tester.innerHTML = config.testString;
        document.body.appendChild(tester);
        var fallbackFontWidth = tester.offsetWidth;
        tester.style.fontFamily = config.font + ',' + config.testFont;
        function checkFont() {
            var loadedFontWidth = tester.offsetWidth;
            if (fallbackFontWidth === loadedFontWidth){
                if(config.timeOut < 0) {
                    $element.removeClass(config.onLoad);
                    $element.addClass(config.onFail);
                    console.log('failure');
                }
                else {
                    $element.addClass(config.onLoad);
                    setTimeout(checkFont, config.delay);
                    config.timeOut = config.timeOut - config.delay;
                }
            }
            else {
                $element.removeClass(config.onLoad);
            }
        }
        checkFont();
    };

    $.fn.fontSpy = function(config) {
        return this.each(function() {
            if (undefined == $(this).data('fontSpy')) {
                var plugin = new $.fontSpy(this, config);
                $(this).data('fontSpy', plugin);
            }
        });
    };

})(jQuery);

Aplícalo a tu proyecto

.bannerTextChecked {
        font-family: "Lobster";
        /* don't specify fallback font here, do this in onFail class */
}

$(document).ready(function() {

    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });

});

¡Quita ese FOUC!

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fall back font */
    /* necessary styling so fallback font doesn't break your layout */
}

EDITAR: Se eliminó la compatibilidad con FontAwesome porque no funcionó correctamente y tuvo problemas con diferentes versiones. Puede encontrar una solución hacky aquí: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1

Sep 07 '2012 10:09 Patrick