Google Fonts导致WordPress 速度问题的三个解决方案

Google Fonts导致WordPress 速度问题的三个解决方案

本来实在是不想写这个的,因为相关方法在圈子里面已经烂大街了。但无奈,一些客户将近期的Google Fonts导致 WordPress 打开速度慢的现象归咎于我的主题——真TM 比窦娥还冤。所以,有必要在这里说下。

2015.2.26更新:Google Fonts 已可正常访问,相关插件可卸,本文已失效

Google Fonts导致WordPress 速度问题之原因

WordPress 自3.8+版本后加入了Google Fonts(别问我Google Fonts是什么了),然后捏,因为近期敏感周期(35号),天朝发威,谷歌的一系列网站被彻底墙,包括Google Fonts 所在的googleapis.com 。所以,如果是在登陆状态下打开你的WordPress 站点,会非常慢,因为压根儿加载不了这个字体文件。如果是非登陆状态且你的主题不是老外的主题,一般来说都是正常的。

解决方法

出来问题就要解决,在天朝,既然你不得不忍受之,那么就换个思路变通一下。下面的解决方法,思路一是禁止加载该Google Fonts,二是替换加载源。下面说明之:

方法一:【插件】禁止WordPress 后台加载Google Fonts

安装启用 Disable Google Fonts 或者 Remove Open Sans font Link from WP core 其中之一即可。没啥好说的。

方法二:【代码】直接在functions.php 文件添加代码

网络上有不少代码,下面可以参考下,具体有没有效果没有确认:

add_filter('gettext_with_context', 'disable_open_sans', 888, 4 );
function disable_open_sans( $translations, $text, $context, $domain )
{
if ( 'Open Sans font: on or off' == $context && 'on' == $text ) {
$translations = 'off';
}
return $translations;
}
function dw_remove_open_sans() {   
        wp_deregister_style( 'open-sans' );   
        wp_register_style( 'open-sans', false );   
        wp_enqueue_style('open-sans','');   
    }   
add_action( 'init', 'dw_remove_open_sans' );

方法三:【代码】替换open sans 字体的加载源

打开wordpress代码中的文件wp-includes/script-loader.php文件,搜索:fonts.googleapis.com 找到这行代码:

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

fonts.googleapis.com替换为fonts.useso.com

6月8日更新:该方法需要改动WordPress 核心代码,过于粗暴,不推荐,下面推荐个更好的代码法,我也将这个其弄成插件,你可以直接下载插件或者在当前主题中加入下面的代码:

<?php
/*
Plugin Name: DW Replace Open Sans
Plugin URI: http://devework.com/replace-open-sans.html
Description: 将WordPress 后台中的open-sans字体加载源从Google Fonts替换为360的CDN加载源。
Author: Jeff
Author URI: http://devework.com/
Version: 1.0
Text Domain: dw-replace-open-sans
*/
 
function devework_replace_open_sans() {
	wp_deregister_style('open-sans');
	wp_register_style( 'open-sans', '//fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' );
	wp_enqueue_style( 'open-sans');
}
add_action( 'wp_enqueue_scripts', 'devework_replace_open_sans' );
add_action('admin_enqueue_scripts', 'devework_replace_open_sans');
?>

详细:DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN

fonts.useso.com 是国内360推出的常用前端公共库CDN服务之一,“由于众所周知的原因,只需替换一个域名就可以继续使用Google提供的免费字体库了。同样,通过样式表引用这些资源,让网站访问速度瞬间提速吧骚年!”具体可以查看:http://libs.useso.com/。

评分:
当前平均分 4.25 (83%) - 12 个投票
云左主机 广告
50 条 评论
  1. 360字体关闭了,之前把google字体 换成360字体,现在打开速度奇慢。

    3月前 回复
    • 现在最新版的WordPress 已经不用google fonts 了,所以相关代码可直接删除。

      3月前 回复
  2. 之前用360字体库还是挺好的,后来360那个字体库简直弱爆了,超级慢!

    2年前 回复
  3. Disable Google Fonts安了这个,可是还会看到font.google.慢
    Remove Open Sans font Link from WP core 这个更不好,是干掉默认的14 25的

    2年前 回复
  4. 360的那个开始快,之后就超慢了,修改代码注释也试过了,开始OK,后来又慢了。可恶的2狗狗

    2年前 回复
  5. 金桂冠

    3年前 回复
  6. 我用了百度经验推荐的一个插件叫googlefonts to 360,结果,,发现开页面的时候还是卡着的,chrome浏览器左下角显示的是链接到baiye.us,好像是这个插件的开发者的网站,他网站好像出问题了,现在怎么解决啊?这个插件把我哪个文件改了?

    3年前 回复
    • 你用那个干什么啊 用Replace Google Fonts 这个

      3年前 回复
  7. :eek: 拜读了,我说最近博客打开怎么这么慢,感谢分享!

    3年前 回复
  8. 升级到4.0,发现慢很多,多谢博主的方法 :razz:

    3年前 回复
  9. 如果仅作为阅读者的哈,可以试试这个插件

    http://liujiacai.net/gooreplacer

    3年前 回复
  10. 我是把字体弄到自己网站,再把字体地址改成自己网站的,保留了字体也保证了稳定

    3年前 回复
    • 这种方法也不错

      3年前 回复
    • 朋友你可以做一个插件,相信有朋友需要的,因为目前useso还太不支持https请求,存在本地的话就解决了这个问题。

      3年前 回复
      • 好像国内某个大学的搞了个反向代理可以支持https的

        3年前 回复
        • 你还记得是哪个地址吗? :smile:

          3年前 回复
          • 中科大

            10月前 回复
  11. 这个只能禁掉系统的google font,如果主题有用到google font, Disable Google Fonts 或者 Remove Open Sans font Link from WP core 以及楼主这个都无效,因为对没有主题做任何动作。我用的是“virtue”主题。最后我是修改主题代码解决的。

    3年前 回复
    • 本来就是指WordPress 自带的google font 的啊、、、

      3年前 回复
      • 分类说明会让人一目了然

        3年前 回复
  12. 360的fonts不支持https。。。 :evil: 不是万不得已,不会用360的东西。。

    3年前 回复
  13. 最后这个方法,我觉得不错,快,管用。

    3年前 回复
  14. 请问方法三的代码只能用在你开发的devework主题上吗?其他的主题可不可以用?

    3年前 回复
  15. 如果服务器在国外,CDN节点在香港,不改变是否会有影响呢?

    3年前 回复
  16. 楼主,我的主题有点复杂,你能教我去掉谷歌字体,并且载入自己的字体吗?

    3年前 回复
  17. 实在是没办法了 网站慢死了 赶紧用

    3年前 回复
  18. 刚开始网站访问速度很慢,经过分析发现连接到google服务器出现了问题,导致网站加载后显示出来极慢。最后没办法只好把GoogleFonts的链接注释掉了。但是问题是网页里字体显得没有那么好看了。直到昨天看到这个插件,帮助我解决了很大的问题。感谢你的分享,受益极大。

    3年前 回复
  19. 博主你好~ 请教下,
    我用方法三 将wp-includes/script-loader.php文件里的 fonts.googleapis.com替换为fonts.useso.com

    页面加载还是很慢。。浏览器(火狐)仍旧提示 正在连接 fonts.googleapis.com ?

    盼回复,谢谢!!

    3年前 回复
    • 同问,完成替换后把文件上传到站点,记载时仍然提示连接fonts.googleapis.com,怎样才能使得文件生效呢?重启web服务器?

      刚接触wordpress的小白,望博主指点。

      2年前 回复
      • 应该是主题自带的了gf文件

        2年前 回复
  20. 我粗暴的把它替换为了360的cdn库。。。。

    // Remove Open Sans that WP adds from frontend
    if (!function_exists(‘remove_wp_open_sans’)) :
    function remove_wp_open_sans() {
    wp_deregister_style( ‘open-sans’ );
    wp_register_style( ‘open-sans’, false );
    }
    // 前台删除Google字体CSS
    // add_action(‘wp_enqueue_scripts’, ‘remove_wp_open_sans’);
    // 后台删除Google字体CSS
    add_action(‘admin_enqueue_scripts’, ‘remove_wp_open_sans’);
    endif;

    // add Open Sans fonts
    function my_open_sans(){
    $my_open_sans_fonts_url = “//fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600”;
    wp_register_style ( ‘my_open_sans_fonts’, ‘$my_open_sans_fonts_url’ );
    wp_enqueue_style ( ‘my_open_sans_fonts’ );
    }
    add_action(‘admin_enqueue_scripts’, ‘my_open_sans’);

    这样感觉既简单,又粗暴!!

    3年前 回复
    • 我的文章已经写了这个了啊,也做成了一个插件:http://devework.com/replace-open-sans.html

      3年前 回复
  21. 非常不错,支持了。
    免费版和收费版的区别是?

    3年前 回复
  22. 方法3不能用function方式解决么?

    3年前 回复
    • 可以,已经有了:http://devework.com/replace-open-sans.html

      3年前 回复
  23. 赶紧用,,要是访问google太慢了。

    3年前 回复
  24. :?:
    该死的64
    正在找这样的CDN,谢谢分享

    3年前 回复
  25. 方法一中两个插件哪个好点?

    3年前 回复
  26. 点赞~ :oops:

    3年前 回复
  27. 请问站长 如果方便的话 能否提供一下贵站首页文章前面的图片 鼠标掠过的时候 那一道闪光实现的方式或代码?非常喜欢。

    3年前 回复
    • 你自己打开开发者工具查看代码就可以了啊

      3年前 回复
  28. 最后一个方法,最管用。那速度忒快啊,然后捏在浏览器状态栏明显看到载入一闪而过。
    插件法没试过。 :grin:

    3年前 回复
  29. :smile: 真是及时雨啊,好东西

    3年前 回复
  30. 这个评论是什么插件?

    3年前 回复
  31. :!: 好牛逼!

    3年前 回复
  32. 修改后加载页面秒开,感谢分享!

    3年前 回复
发表评论