font-preload.js

(function () {
    /**
     * Preloader for Font Families. This will preload fonts used with CSS @font-face.
     * @param fontFamilies {string[]} A collection of font family names to preload.
     */
    var preloadFontFamilies = function (fontFamilies) {

        // Create a hidden container.
        //
        var containerElement = document.createElement('div');
        containerElement.style.opacity = 0;
        containerElement.style.width = 0;
        containerElement.style.height = 0;
        containerElement.style.overflow = 'hidden';

        // Create an element for each font family with style property and some content
        // and append it to the container.
        //
        fontFamilies.forEach(function (fontFamily) {
            var fontFamilyElement = document.createElement('div');
            fontFamilyElement.style.fontFamily = fontFamily;
            fontFamilyElement.innerText = 'x ' + fontFamily;

            containerElement.appendChild(fontFamilyElement);
        });

        // Append the container.
        //
        document.body.appendChild(containerElement);

        // The browser will be triggered to download the fonts. Job done! 
        // Remove the container in the next cycle.
        //
        setTimeout(function () {
            document.body.removeChild(containerElement);
        }, 0);
    };

    /**
     * Feature detection for link[rel="preload"].
     */
    var browserSupportsLinkPreload = ("onpreload" in document.createElement("link"));

    // If browser doesn't support link[rel="preload"], use custom preloading.
    //
    if (!browserSupportsLinkPreload) {
        var fontFamilies = [
            'Custom Font'
        ];
        preloadFontFamilies(fontFamilies);
    }
})();