之前的一篇从自己服务器加载谷歌字体介绍了手动下载谷歌字体的方法,一两个字体玩玩还可以,多了就有点累。所以写了一个自动下载谷歌字体的脚本,下载字体woff和eot文件格式,并产生stylesheet,可以直接拿到主题里去用。

下载脚本:Google Web Font Download Script 已下载 520 次

基本原理

用cURL模拟浏览器的user agent,请求所需字体格式。例如模拟IE8可获得eot格式,模拟Firefox获取woff,也可以继续请求ttf、svg、woff2等格式。本文只是用eot和woff。

使用方法

将解压后的download-google-font.php文件放到服务器或者本地server里运行,如果是本地运行,记得开vpn。请保证脚本所在目录具有可写权限。

打开Google Web Fonts选择要下载的字体,获得href里的url,例如open sans。

get-url

可以一次选择多个字体,每个字体一个url,填写到对话框里,每行一个url

download-google-fonts

点击Download Google Web Fonts开始下载,下载过程中没有提示,直到完成。

完成后会列出已经下载的字体,以及demo page的链接

demo-link

打开后可以查看字体效果,例如open sans

demo-page打开字体脚本所在文件夹,可以看到下载的字体目录,下图为本地wamp server执行结果,服务器的话用ftp等工具查看。

fonts-downloaded

 opensans-2  opensans-3

56条留言

  1. Hi Cathy.

    因谷歌服务在国内无法正常使用。之前了解到,禁用谷歌字体会提升加载速度(但牺牲美观),于是我用了如下两个插件。

    Remove Open Sans font from WP core
    Disable Google Fonts

    但现在觉得自己博文的字体很丑,就想着到你这来搜下看是否有相关的博文,还真有,谢谢分享。

    博文《从自己服务器加载谷歌字体》说到“谷歌字体现在不能用,什么也不说了”;而本博文提供另一个思路,即将谷歌字体下载到自己的服务器,这样在国内也不会影响访问了。不知道,我理解对了没?

    1. 进一步,按本文的步骤将谷歌字体下载好,放到./wordpress/wp-includes/fonts,就可以了吗?

      这样的话,我就可以删除以下两个插件了?

      Remove Open Sans font from WP core
      Disable Google Fonts

      1. 是的,如果没有Merriweather字体就用后面的,一直fallback到系统默认字体

      2. 你用的收费主题吗?child theme是官方推荐的不影响原主题升级的方式,用child theme样式表覆盖parent theme样式没什么副作用。但不要进行太多的功能修改,某些收费主题更新时变化太大,即使child theme也招架不住,搞不好要跟着更新该。

        另外定制后台界面样式只需要加一些代码到主题的functions.php里,具体可以看这篇文章
        https://css-tricks.com/snippets/wordpress/apply-custom-css-to-admin-area/

        1. 用的是免费的,radiate,除了用child 主题,还有其他方法推荐吗? 使得升级主题尽量不会受到影响。

          1. child theme足矣,而且主题和插件不同,大部分升级只是改样式加新功能,并不是不兼容WordPress了,有的主题升级几次后就不再是原来那个主题了。

            影响主题外观的更改写进child theme里,影响站点功能的要用插件方式改,例如custom post type、评论回复等等,这样更换主题时会比较方便。

    2. 理解的没错,从自己服务器加载国内外访问都没问题,就像普通的webfont一样,虽然牺牲谷歌cdn根据浏览器加载不同字体格式的特性。

      1. 谢谢。进一步请教,我怎么知道我的wordpress,都用到哪些字体?

        这样的话,就可以将 我wordpress用到的字体全部下载到自己的服务器。

          1. 谢谢Sola,比如我的style.css:

            textarea {
            font-family: ‘Merriweather’, Georgia, serif;
            }

            这是不是意味着,如果加载Merriweather失败,就加载Georgia,要是都失败就用系统默认的字体?

      2. 我了解到360CDN提供谷歌字体库,于是我修改wordpress/wp-includes/script-loader.php文件中的open_sans_font_url。

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

        //替换成 ( fonts.googleapis.com –> fonts.useso.com )
        $open_sans_font_url = “https://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets”;

        1. opensans是WordPress默认给后台提供的,如果你不用可以直接禁用,后台用微软雅黑字体也不错的。
          用360CDN也无需修改核心文件,比如你可以禁用默认的opensans,再用wp_enqueue_style重新引入360的即可,免得升级wordpress变麻烦。

          1. 谢谢指点。恩,我也在考虑,如何能升级主题不受影响。我了解到有一个叫childen themes,打算以后花些时间弄一下。你怎么看childen themes?

            我现在能做的是,把修改的css放在Dashboard,自定义主题的custom css里,另一个就是随时记录下自己所做的修改。

  2. 偶然來到這邊找到可用的代碼,
    不勝感激。

    看到下面留言也挺有意思,
    想到最近幫一個陌生人寫了段代碼解決問題卻連感謝詞都沒有,
    心有戚戚焉,呵呵。

  3. 是呀,高手不经意间就火了,上不了头条的么怎么着也没法上。
    呵呵,其实回答问题是负担也是说明sola已经有粉丝了。考虑下怎么转化一下看看有没有新的发展。兴趣做成事业也不错的。

    1. 这难度太高的,大部分都是抱着免费解决问题的希望来的。要转化就得写插件主题,但不卖成白菜价估计粉丝也不买账。没啥意思,目前改变不了打工生存的现状,那还不如给认可自己的人打工。

      1. 呵呵 所以要花心思。水煮鱼那样的方式估计也不怎么好。

        1. 水煮鱼有团队的,而且那也不是他们主业。

  4. 赞成你老公的意思。就己所能,略微帮帮就好,费力没意思的,而且网上二货太多。

  5. 呵呵,可不要为了我一句没过脑的话影响心情。自嘲惯了,呵呵。

    1. 不会,看见你从哈哈哈变成呵呵,我倒是真要影响心情了

  6. 没有,怎么可能贬义。我同学老是说自个儿码农小队长。呵呵,太自来熟了可能,冒失了。别介意

    1. 这种地方说话缺少语境,码农不是重点,怕的是费力不讨好,上次博客上有人问我一个问题,我写了段代码给他解决了。我老公说我是吃饱了撑的,那段代码拿来挣钱,我新买的cherry键盘钱就有了。

  7. 是南方人吧你?

  8. 哈哈哈也是。还是专职码农好。

    1. 码农应该是一个贬义词,如果我没理解错的话,讽刺只会写代码不思考的初级程序员。我在你心中是这种形象吗?如果我理解错了先说声对不起。

      1. 我发现生活中有不少词,自己说可以,但别人那样说就不能忍了。比如:父母亲可以说自己孩子的不好,但要是旁人指责他家孩子,就几乎不能忍了。

        对于“码农”这个词也是类似,自己说是自嘲是谦虚,但别人说,就像你所说的那样,“讽刺只会写代码不思考的初级程序员”。

        1. 嗯嗯,关键是语境,而且为了追求自由的生活而当了自由职业者,轻易不会做自己讨厌的工作。

  9. 哈哈哈,我就是花时间省钱的。下次我做好了发你帮我看看,不胜感激。

    1. 感激不能当饭吃哦,而且最近我正在考虑不再回答问题,写博客就是给自己看的,很多人问问题描述不清楚,解决了连声谢谢都不愿多说。想想浪费那些时间真不如去给国外客户打杂了,反正都是写代码。

      1. 问题描述不清楚,我也有同感。在StackOverflow提问过一些问题,总结了两点心得:

        (1)能搜索到(百度、谷歌、本站的站内搜索)的,不要提问
        (2)提问时,附上自己的一些想法,已做的一些努力

        做到这两点,所问的问题会被尊重,自然也会得到好的解答。

        1. 没错,问的认真是对回答者的尊重。

  10. GFW 不那么狠是可以,如今不vpn客户都没法找,对了sola主要做哪一类网站的?B2c吗?

    1. 没那么高端,说实话做整站还真是不多,大部分都是修改主题写个插件之类的,电商类的网站本来没啥研究,后来亲戚非要让做个卖东西的网站,才研究起woocommerce,于是也开始做woocommerce的定制。
      国外很多客户做网站,比起花钱更愿意节省时间,有的改几个字也不愿自己研究,于是养活了我这类人。

  11. 防欺诈主要是,vpn和代理购买,hg好像无法收到全款。但是两次我都是vpn买的,然后我又问为什么后面那次购买成功了吗?客服查了下说:成功了。我说confused,why?他说他也不知道,但确实成功了。呵呵,不过话说回来,老外态度还不错。

    1. 我就不敢用vpn付款,买服务器我都用paypal,通过vpn交易会被冻结账号,还要打电话各种折腾,害怕了。

  12. 哈哈哈是呀。还回复我n长的邮件,和vpn有关。话说你是怎么买的,不用vpn好像上hg网站很卡呀?

    1. 说到vpn,我提交前一条评论时改着ip,结果服务器直接给拦截了,提示mod_security错误,把vpn关了才可以…

  13. 哈哈哈,下次把他们客服的邮件发你。你有邮箱吗,我转发你,我用不地道的英语折磨了他们客服很久才弄明白,他们客服还挺耐心,又把电话内容想我邮件解释了一下。

    1. 难道客服给你解释了退款的原因?

    2. 我买的时候不卡,那会还没大规模屏蔽谷歌,所以… 不过买了以后我就各种vpn登陆,不然进cpanel有时会卡会。看来人家也不是故意的,哈哈

  14. 呵呵好的。我就是那个max。hostgator好像被我买到了。我去试试,不懂再请教。

    1. 别老换名字啊。买到就好起码说明我下次买还是有希望的。

  15. 呵呵,你的脚本我下载了两个文件woff / eot. 我想问的就是svg 和 哪里下载呢?

    1. 一般那俩就够用了。svg和ttf嘛,你先找找看哪些浏览器会使用这种格式,然后用模拟它们(修改user agent)向谷歌请求,我脚本里有一段switch代码,你再加俩case,照着写写呗。

  16. 没有诶,哪里找呀。

    1. 不是太明白你在说啥,浏览器里输入样式表地址,不就有字体的地址了么。要是实在不懂你个你身边的人问问吧

  17. Custom Font .svg / Custom Font .ttf
    如何获取?

  18. 这个脚本用不了呀,为什么,报错

    1. 我只发现有个notice错误,可以忽略的。服务器配置、文件夹权限等都有可能影响程序,这段代码就是写给自己用的不会去考虑太多,如果你要用的话最好懂php

评论功能已关闭