解决网站加载googleapis字体缓慢失败问题

文章2022-08-29
解决网站加载googleapis字体缓慢失败问题-下一朵云

WordPress安装插件后,发现每次编辑文章,编辑器的页面加载缓慢,要等10s+才能打开,F12调试后发现,插件在调用google的字体,如图

解决网站加载googleapis字体缓慢失败问题-下一朵云
图1 问题描述

由于国内网络的原因,google字体一直无法加载,导致页面一直等待加载。现在360公司也不再提供服务(fonts.useso.com)。所以尝试了一些列插件:selfhost-google-fonts、autoptimize.2.9.5.1等均无法替换插件加载google字体

经过多次尝试后,解决办法如下

1.查找加载google字体代码位置

find . -type f -print | xargs grep "https://fonts.googleapis.com/"

结果显示 ./wp-includes/script-loader.php 文件有两处加载google的字体

$open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets&display=fallback";

$fonts_url = 'https://fonts.googleapis.com/css?family=' . urlencode( $font_family );

2.有以下两种解决办法

1)删除google字体的的链接

//$open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets&display=fallback";
$open_sans_font_url = "";

//$fonts_url = 'https://fonts.googleapis.com/css?family=' . urlencode( $font_family );
$fonts_url = '' . urlencode( $font_family );

此时打开编辑文章的页面时,对应的插件将不再加载字体,理论上会影响字体美观,但实际测试并未发现区别。

2)将字体文件缓存到自己的网站或cdn,修改css文件中字体的链接

从google上把css中所有的字体下载,把css和字体文件都放到网站或cdn中,然后替换原代码为

//$open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets&display=fallback";
		$open_sans_font_url = "https://myoss.orcy.net.cn:9000/oss-orcy-img/googleapis-fonts/fonts.css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets&display=fallback";
	
//	$fonts_url = 'https://fonts.googleapis.com/css?family=' . urlencode( $font_family );
		$fonts_url = 'https://myoss.orcy.net.cn:9000/oss-orcy-img/googleapis-fonts/fonts.css?family=' . urlencode( $font_family );
	}

如上,我将对应的字体文件和css文件放到自己的cdn中https://myoss.orcy.net.cn:9000/oss-orcy-img/googleapis-fonts/font.css,其中font.css文件中的字体链接已经由https://fonts.gstatic.com替换为本地的字体文件

提供一个免费的googlefonts的地址:https://fonts.0t.net.cn (由cloudflare提供加速服务)

使用方法: 将 ‘https://fonts.googleapis.com/css?family=’ 替换为 ‘https://fonts.0t.net.cn/fonts.css?family=’

*你可以下载如下字体和css文件压缩包,解压缩到自己的网站中,使font.css可以正常访问即可将https://fonts.googleapis.com替换为font.css的链接
字体文件和css文件下载地址: https://download.csdn.net/download/i12344/80925992

3.此时刷新缓存,字体正常加载

解决网站加载googleapis字体缓慢失败问题-下一朵云
图2 正常加载
本文链接:https://www.orcy.net.cn/2174.html,转载请附上原文出处链接

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注