灵尘居

现在WordPress都会用到Google fonts 谷歌字体，虽然国内也可以访问，但难保那天又挂了。14年的时候，我写过一篇用Nginx反代Gravatar头像的文章，同样的，我们也能用Nginx反代缓存谷歌字体。

本文以一键lnmp安装包为例，http://lnmp.org/

1、首先你需要一个可用的环境

一个稳定可靠国外的VPS，如果没有的可以买个Vultr，我的博客也是用这个哦。

Vultr服务商虽然是从2014年才开始提供云VPS主机服务产品的，但是其背景还是相当实力雄厚的，来自著名的游戏服务器提供商，正是因为其全球范围的服务器部署优势，从一开始就直接上线14个自营数据中心机房，这个在同行业中数据中心数量算是领先的。

Vultr VPS主机全部采用KVM架构，最低月付仅需要5美元（768MB内存起步），全部采用SSD固态硬盘，他的出现，甚至给一直霸占老大地位的Linode商家连续降价和提高配置，甚至也影响到整个行业的成本降低，对我们消费者是有利的。

目前，Vultr VPS采用灵活的小时计费方式，我们可以快速的部署服务器，可以用于建站和项目的需求。

2、修改nginx.conf配置文件，加入代理缓存功能

找到nginx.conf所在位置：/usr/local/nginx/conf/

查找#limit_conn_zone $binary_remote_addr zone=perip:10m;，并在前面加入以下内容：

client_body_buffer_size 512k;
proxy_connect_timeout 5;
proxy_read_timeout 60;
proxy_send_timeout 5;
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
proxy_temp_path /home/cache/temp;
#配置临时目录
proxy_cache_path /home/cache/path levels=1:2 keys_zone=cache:20m inactive=30d max_size=600m;
#20m是内存占用，30d是30天无访问删除，600m是缓存占具硬盘空间，cache为缓存区名字，
如果修改则下文的配置亦要相应修改。

创建缓存目录，并赋予权限

mkdir /home/cache/path -p
mkdir /home/cache/temp
chmod 755 -R /home/cache

3、在vhost下新建下conf文件，复制Nginx代码：

upstream fonts_google {
    server fonts.googleapis.com:80;
}

upstream fonts_gstatic {
    server fonts.gstatic.com:80;
}

server {
    listen 80;
    listen [::]:80;

    server_name fonts.yourdomain.com; #改为自己的字体库域名
    access_log /home/wwwlogs/fonts.log access;


    location /css {
        sub_filter 'fonts.gstatic.com' 'fonts.yourdomain.com';#改为自己的字体库域名
        sub_filter_once off;
        sub_filter_types text/css;
	proxy_cache cache;
        proxy_cache_valid 200 304 7d;
        #200 304状态缓存7天，按实际情况修改
        #其他状态缓存（如502 404）10秒
        proxy_cache_valid any 10s;
        proxy_cache_key "$scheme$host$request_uri";
        #缓存key规则，用于自动清除缓存。
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://fonts_google;
    }

    location / {
        proxy_cache cache;
        proxy_cache_valid 200 304 7d;
        proxy_cache_valid any 10s;
        proxy_cache_key "$scheme$host$request_uri";
        proxy_pass_header Server;
        proxy_set_header Host fonts.gstatic.com;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://fonts_gstatic;
    }
}

完整的代码下载：点这里

解释一下上面的一些东西：

sub_filter ‘fonts.gstatic.com’ ‘fonts.miskcoo.com’; 这一行是把返回的所有东西里边的 fonts.gstatic.com 替换成我们自己的域名，要不然你得到了 css 文件，字体内容还是在 google 上面。

然后 sub_filter_once off; 是表示全部替换，proxy_set_header Accept-Encoding ”; 这要求 google 返回不压缩的内容，因为压缩了就没有办法进行替换了。

proxy_set_header 重新定义或添加发往后端服务器的请求头。

proxy_redirect 决定是否替换掉后端返回的 Location 响应头和 Refresh 响应头。

proxy_pass 设置后端服务器的协议和地址，可以使用 URI （统一资源标记符，区别于 URL，参见维基百科）

4、在WordPress主题function文件加入

//反代替换谷歌字体
function wp_replace_open_sans() {
wp_deregister_style('open-sans');
wp_register_style( 'open-sans', '//fonts.yourdomain.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' );
if(is_admin()) wp_enqueue_style( 'open-sans');
}
add_action( 'init', 'wp_replace_open_sans' );

代码下载
5、需要解析域名fonts.yourdomain.com，上传Nginx文件，重启nginx。

6、HTTPS的方法，大家自行搜索吧。