boilerplate.js/Boilerplate/src/js/components/fonts/_init.js

Development Tools

components('fonts.init', () => {

    let elements = document.querySelectorAll('[custom-font]');
    if (elements.length === 0) return;

    let fonts = {
        'GFS Didot': 'https://fonts.googleapis.com/css?family=GFS+Didot'
    };

    let found = {};

    elements.forEach(element => {
        let font = element.getAttribute('custom-font');
        if (element.hasAttribute('import-from-google') && !fonts[font]) fonts[font] = 'https://fonts.googleapis.com/css?family=' + font;
        if (fonts[font]) found[font] = true;
    });

    Object.keys(found).forEach(font => {
        Defer.css(fonts[font]);
        injectCSS(`
            [custom-font="${font}"] {
                font-family: "${font}" !important;
            }
        `);
    });
    
});