自建谷歌字体本地CDN加速WordPress个人博客

  • 8
  • 1,774 views
  • A+
所属分类:wordpress

谷歌被墙导致字体无法加载应用半天响应不过来,通过第三方插件可以解决这个问题;
一般都是通过360 CDN公共库解决这个谷歌字体加载不上的方法,360公共库并不是把谷歌字体下载到它的服务器而是通过它的服务器代理来让我们访问到谷歌的字库;
代理访问而且用的人特别多肯定速度有时并不会很理想;
今天下午不用上班没事做就突然想着折腾一下自建一个本地谷歌字库;
打开本地Uedit代码编辑器开始分析WordPress代码,马上就发现一个问题;谷歌字体加载连接是一个动态URL非常庞大而且是通过网站的需求来动态加载所需要的字体;
将谷歌字体全部下载下来放自己服务器这肯定不现实,那么我就尝试将我的个人博客用到了那些字体就下载哪些字体下载到本地试试看;
PS:边写文章边尝试中,万一失败直接Deletel........
首先开启VPN让我的个人博客正常打开网站,然后查看源代码找到加载谷歌字体这条连接;
自建谷歌字体本地CDN加速WordPress个人博客
打开它就会看见里面加载了哪些字体,把它们全部下载到本地;
然后将这个页面保存为google-font.css文件;
自建谷歌字体本地CDN加速WordPress个人博客
接下来我要把字体上传到自己服务器上面,我选择了img.5yun.org这个主机它做了七牛CND加速用了一段时间挺理想;
不过上传前要修改google-font.css加载字体路径
自建谷歌字体本地CDN加速WordPress个人博客
然后找到主题functions.php文件,将下面函数写进去保存;

自建谷歌字体本地CDN加速WordPress个人博客
技艺不精折腾了两个小时,总算弄好了,刚才找了几个朋友测试了一下正常显示加载无异常情况;
虽然谷歌字体被大陆屏蔽有360公共库等方法可以代理访问谷歌字体,但是尝试用本地化字体的方法也是一种很好的解决方案;

补充:
晚上发现有个很重要的步骤给忘了,要打开/wp-includes/script-loader.php文件编辑才能生效
//fonts.233.wiki/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets
替换成//www.5yun.org/wp-content/img/google-fonts/google-fonts.css

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

,输入正确后才能评论!

目前评论:8   其中:访客  5   博主  2   引用   1

    • tutugreen tutugreen 6

      它做了七牛CND加速 (〜 ̄△ ̄)〜<

      • 皇家元林 皇家元林 6

        我也需要这种想法,可惜只有360做了。。我不喜欢的360却做了

          • 楚盟 楚盟 Admin

            @皇家元林 可以直接屏蔽掉谷歌字体不让其加载,也可把谷歌字体放到自己服务器上面,不过放到七牛上面引用也是一个很好的办法;

              • Phoenix Phoenix 6

                @楚盟 我用的国外付费主题,请问怎么能办到直接屏蔽掉谷歌字体不让其加载?不是特定字体而且所有谷歌字体?

                  • 楚盟 楚盟 6

                    @Phoenix https://wordpress.org/plugins/google-fonts-acceleration/ 你可以试试这个插件,我一直在用[呵呵]

              • YCH YCH 6

                这个是不科学的。ie下的google-fonts.css和chrome下的google-fonts.css的内容是不同的。ie优先使用eot。chrome优先使用woff。直接简单粗暴的保存,会导致兼容性问题,特别是图标类的字体。

                  • 楚盟 楚盟 Admin

                    @YCH 你说的对 这个当时没考虑到 平时极少用IE

                • 来自外部的引用: 1

                  • WordPress打开速度慢的要死,新手不妨试试WP Acceleration for China | N次元杂货铺