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 usando Comic Sans como fuente para probar, porque es la más diferente de las fuentes seguras para la web y, con suerte, lo suficientemente diferente a cualquier fuente personalizada que esté usando. Además, estamos usando 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 una alternativa a Comic Sans. Cuando se marca, si el ancho del elemento de la 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 de jQuery diseñado para brindar al desarrollador la capacidad de diseñar elementos en función de si la fuente se ha cargado o no. Se ha agregado 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 he agregado 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 puede hacer lo que quiera con la fuente. Solo recomendaría modificar el tamaño de las fuentes, el espaciado entre líneas, etc. para que su fuente alternativa sea lo más cercana posible a la personalizada, de modo que su diseño permanezca intacto y los usuarios obtengan una experiencia esperada.
Aquí hay una demostración: http://patrickmarabeas.github.io/jQuery-FontSpy.js
Lanza lo siguiente en un archivo .js y haz 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";
}
$(document).ready(function() {
$('.bannerTextChecked').fontSpy({
onLoad: 'hideMe',
onFail: 'fontFail anotherClass'
});
});
¡Quita ese FOUC!
.hideMe {
visibility: hidden !important;
}
.fontFail {
visibility: visible !important;
}
EDITAR: Se eliminó la compatibilidad de FontAwesome porque no funcionaba correctamente y tenía problemas con diferentes versiones. Se puede encontrar una solución hacky aquí: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1