Preload key requests - Font is not used by browser

Question

We are using TheGem WordPress theme and it has a pre-added code in header.php. We don't add any preload links nor we use any plugin but Google PageSpeed Insights is showing error

"Warnings: A preload <link> was found for "Font-URL" but was not used by the browser. Check that you are using the crossorigin attribute properly."

Now we want to disable this PHP code but whenever we edit this code, it will break the whole site or we see error again even after editing it.

    <?php
    if (thegem_get_option('font_preload_enabled')) {
        $fonts = thegem_get_option('font_preload_preloaded_fonts');
        $additionalFonts = thegem_additionals_fonts();
        $sysFontUri = get_template_directory_uri().'/fonts/';

        $sysFonts = array(
            'Thegem Icons' => $sysFontUri.'thegem-icons.woff',
            'Elegant Icons' => $sysFontUri.'elegant/ElegantIcons.woff',
            'Materialdesign Icons' => $sysFontUri.'material/materialdesignicons.woff',
            'Fontawesome Icons' => $sysFontUri.'fontawesome/fontawesome-webfont.woff',
            'Thegem Socials' => $sysFontUri.'thegem-socials.woff',
        );

        foreach(explode(',', $fonts) as $font) {
            $url = isset($sysFonts[$font]) ? $sysFonts[$font]:'';
            if (!$url) {
                foreach($additionalFonts as $additionalFont) {
                    if ($additionalFont['font_name'] == $font && isset($additionalFont['font_url_woff'])) {
                        $url = $additionalFont['font_url_woff'];
                        break;
                    }
                }
            }

            if ($url) {
                echo '<link rel="preload" as="font" crossorigin="anonymous" type="font/woff" href="'.$url."\">\n";
            }
        }
    }
?>  

Someone help to make it disable so we will add preload fonts manually through swap. Thanks

Answer 1

This script adds a <link> tag for each of those fonts, but you're not using one or more of them. There's a lot of overlap between all these sets (like FontAwesome and Material Design both have Save, Upload, Menu, etc icons) and they are themed for consistency. You probably want just one of them to load, whichever your site is using.

To fix this look at your CSS and look for @font-face - these links are just preloading, it's the @font-face that actually sets up the icon font. If any of these don't have a matching @font-face then you can safely remove them.