Google Webfonts: как выгрузить шрифты после их загрузки?

Question

В настоящее время я могу загрузить веб-шрифт очень легко с помощью Google's Web Font loader:

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

Однако, возможно позже выгрузить шрифты и не добавлены элементы из DOM, так что они больше не используются на этой странице?
В документации к Github проекта не отображаются какие-либо опции или методы, предлагающие функциональность.

Answer 1

Вы можете просто использовать MutationObserver, чтобы отслеживать изменения, внесенные в DOM, и удалять добавленные элементы по вашему желанию.
Ниже приведен простой пример реализации:

(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>