¿Cómo puedo detectar cuando una fuente web de Google está lista y se muestra en la página?

Question

Necesito activar una acción tan pronto como las fuentes en mi página cambien a las de Google. (Estoy usando el modo css) ¿Hay algún evento DOM disparado en el interruptor de fuente?

Answer 1

No estoy seguro si esto es lo que necesita, pero puede intentarlo. Si utiliza WebFont Loader, entonces puede ser que pueda rastrearlo.

La Fuente Web Loader es una biblioteca JavaScript que le da más control sobre la carga de la fuente de la web Google Fuentes API proporciona. WebFont Loader también le permite usar múltiples proveedores de fuentes web . Fue codesarrollado por Google y Typekit.

Se puede hacer uso de algunos servicios repetidos como loading(), active(), fontactive(fontFamily, fontDescription) e.t.c. o verificando algunos atributos de clase .

Here it is, espero que te ayude.

Answer 2

David Walsh tiene una guía para utilizar la API de Google TypeDNA Font Manager aquí: http://davidwalsh.name/google-fonts-api

He aquí un ejemplo de su mensaje:

WebFontConfig = { 
    google: { 
     families: [ 'Tangerine', 'Cantarell' ] 
    }, 
    /* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */ 
    loading: function() { 
     // do something 
    }, 
    /* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ 
    fontloading: function(fontFamily, fontDescription) { 
     // do something 
    }, 
    /* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ 
    fontactive: function(fontFamily, fontDescription) { 
     // do something 
    }, 
    /* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ 
    fontinactive: function(fontFamily, fontDescription) { 
     // do something 
    }, 
    /* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */ 
    active: function() { 
     // do something 
    }, 
    /* Called if the browser does not support web fonts or if none of the fonts could be loaded. */ 
    inactive: function() { 
     // do something 
    } 
}; 

/* async! */ 
(function() { 
var wf = document.createElement('script'); 
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
wf.type = 'text/javascript'; 
wf.async = 'true'; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(wf, s); 
})();