预加载键请求 - 浏览器不使用字体

Question

我们正在使用 TheGem WordPress 主题，它在 header.php 中有一个预先添加的代码。我们不添加任何预加载链接，也不使用任何插件，但 Google PageSpeed Insights 显示错误

"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."

现在我们想禁用此 PHP 代码，但每当我们编辑此代码时，它都会破坏整个站点，或者即使在编辑后我们仍会再次看到错误。

    <?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";
            }
        }
    }
?>

有人帮助将其禁用，因此我们将通过交换手动添加预加载字体。谢谢

Answer 1

此脚本为其中的每一种字体添加了一个 <link> 标签，但您并未使用其中的一种或多种字体。所有这些集合之间有很多重叠（例如 FontAwesome 和 Material Design 都有保存、上传、菜单等图标）并且它们的主题是为了保持一致性。您可能只想加载其中的一个，无论您的网站使用的是哪个。

要解决此问题，请查看您的 CSS 并查找 @font-face - 这些链接只是预加载，真正设置图标字体的是 @font-face。如果其中任何一个没有匹配项 @font-face，那么您可以安全地删除它们。

预加载键请求 - 浏览器不使用字体

Preload key requests - Font is not used by browser

javascript

php

wordpress

pagespeed

preload