Google Webfonts: come scaricare i caratteri dopo averli caricati?

Question

Attualmente posso caricare un font web molto facilmente utilizzando Google's Web Font loader:

WebFont.load({ 
    google: { 
     families: ['Bree Serif'] 
    } 
}); 

Tuttavia, è possibile in seguito scarico i font e gli elementi del DOM aggiunto in modo non sono più usati sulla pagina?
La documentazione sul Github del progetto non mostra alcuna opzione o metodo che offre la funzionalità.

Answer 1

È possibile utilizzare semplicemente uno MutationObserver per tenere traccia delle modifiche apportate al DOM e rimuovere gli elementi aggiunti quando lo si desidera.
Qui di seguito è un semplice esempio di implementazione:

(function() { 
 
    "use strict"; 
 
    var addedNodes = []; 
 
    var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
     Array.prototype.forEach.call(mutation.addedNodes, function(node) { 
 
     addedNodes.push(node); 
 
     }); 
 
    }); 
 
    observer.disconnect(); 
 
    }); 
 
    loader.addEventListener('click', function() { 
 
    observer.observe(document, { 
 
     childList: true, 
 
     subtree: true, 
 
     addedNodes: true 
 
    }); 
 
    //Two loads simply to demonstrate that's not a problem 
 
    WebFont.load({ 
 
     google: { 
 
     families: ['Bree Serif'] 
 
     } 
 
    }); 
 
    WebFont.load({ 
 
     google: { 
 
     families: ['Indie Flower'] 
 
     } 
 
    }); 
 
    loader.disabled = true; 
 
    remover.disabled = false; 
 
    }); 
 

 
    remover.addEventListener('click', function() { 
 
    addedNodes.forEach(function(node) { 
 
     node.remove(); 
 
    }); 
 
    addedNodes = []; 
 
    loader.disabled = false; 
 
    remover.disabled = true; 
 
    }); 
 
}());

body { 
 
    text-align: center; 
 
    background: aliceblue; 
 
} 
 
h1 { 
 
    font-family: 'Indie Flower'; 
 
    font-size: 3em; 
 
    color: cadetblue; 
 
} 
 
p { 
 
    font-family: 'Bree Serif'; 
 
    color: crimson; 
 
} 
 
input[disabled] { 
 
    display: none; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script> 
 
<input id="loader" type="button" value="Click to load webfonts" /> 
 
<input id="remover" type="button" value="Remove loaded webfonts" disabled="true" /> 
 
<h1>Chapter 1</h1> 
 
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>