无法在WordPress中预加载字体

问题描述

我花了几个小时，却找不到任何解决方案。我正在尝试以.woff扩展名预加载Elegant Icons字体，但我认为我所做的一切都正确，但是Google Page Speed Insights仍然发现问题：

”“我们建议您使用<link rel = preload>来指定更早的日期检索资源”。

我可以看到字体中的图标已加载到前端，但是，根据Google Page Speed Insights，该字体仍未预加载。任何帮助将不胜感激。这是我在functions.PHP中的代码：

function my_fonts() {
    //Add Elegant Icons font
    wp_enqueue_style( 'elegant-icons-font',get_template_directory_uri() . '/assets/font/ElegantIcons.woff' );
    
        //Add Elegant Icons css
    wp_enqueue_style( 'elegant-icons',get_template_directory_uri() . '/assets/css/elegantIcons.css' );
}


add_action( 'wp_head','my_fonts' );


/* Preload Icons font */

function my_font_loader_tag_filter($html,$handle) {

  if($handle === 'elegant-icons-font' ) {

return str_replace("rel='stylesheet'","rel='preload' as='font' type='font/woff2' crossorigin='anonymous'",$html);

  }
  
  return $html;

}

add_filter('style_loader_tag','my_font_loader_tag_filter',10,2);

在我拥有的Elegant Icons CSS中

@font-face {
    font-family: 'ElegantIcons';
    src: url('../fonts/ElegantIcons.woff') format('woff'),url('../fonts/ElegantIcons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

如果我从css文件中删除了src属性，则图标不再显示在前端。我什至尝试在网站标题中使用preload属性对链接进行硬编码，但Google Page Speed洞察仍然不满意。我真的没有任何想法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

pagespeed-insights wordpress