通过 Nginx 反向代理来加速 Google Fonts

通过 Nginx 反向代理来加速 Google Fonts 文件的加载速度,实现更快的页面加载速度。

首先,你需要创建一个文件名为 google_fonts.conf 的配置文件(或者你可以将以下行添加到已有的 Nginx 配置文件中):

location /google-fonts/css/ {
	sub_filter 'fonts.gstatic.com' '$host/google-fonts';
	sub_filter_once off;
	sub_filter_types text/css;
	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 https://fonts.googleapis.com/css;
	
	proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie Vary;
	
	proxy_cache nginx-cache;
	proxy_cache_valid  500 502 503 504 404 10s;
	proxy_cache_valid  200 302 304 365d;
	proxy_cache_key $support_woff2$host$uri$is_args$args;
	add_header X-Proxy-Cache $upstream_cache_status;
	
	expires max;
}

location /google-fonts/css2/ {
	sub_filter 'fonts.gstatic.com' '$host/google-fonts';
	sub_filter_once off;
	sub_filter_types text/css;
	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 https://fonts.googleapis.com/css2;
	
	proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie;
	
	proxy_cache nginx-cache;
	proxy_cache_valid  500 502 503 504 404 10s;
	proxy_cache_valid  200 302 304 365d;
	proxy_cache_key $support_woff2$host$uri$is_args$args;
	add_header X-Proxy-Cache $upstream_cache_status;
	
	expires max;
}

location /google-fonts/icon/ {
	sub_filter 'fonts.gstatic.com' '$host/google-fonts';
	sub_filter_once off;
	sub_filter_types text/css;
	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 https://fonts.googleapis.com/icon;
	
	proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie;
	
	proxy_cache nginx-cache;
	proxy_cache_valid  500 502 503 504 404 10s;
	proxy_cache_valid  200 302 304 365d;
	proxy_cache_key $support_woff2$host$uri$is_args$args;
	add_header X-Proxy-Cache $upstream_cache_status;
	
	expires max;
}

location ~ /google-fonts/.+\.(woff2|woff|svg|ttf)$ {
	rewrite  /google-fonts/(.*) /$1 break;
	
	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 https://fonts.gstatic.com;
	
	proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie;
	
	proxy_cache nginx-cache;
	proxy_cache_valid  500 502 503 504 404 10s;
	proxy_cache_valid  200 302 304 365d;
	proxy_cache_key $host$uri$is_args$args;
	add_header X-Proxy-Cache $upstream_cache_status;
	
	expires max;
}

这里“/google-fonts”是虚拟目录的名称,也可以使用任何其他名称,但必须与主站点 URL 路径相同。

然后,将以下行添加到 Nginx 主配置中,以从新配置的 google_fonts.conf 文件加载配置:

http {
	proxy_temp_path /path/to/temp;
	proxy_cache_path /path/to/cache levels=1:2 keys_zone=nginx-cache:256m max_size=5g inactive=365d;
	include /path/to/google_fonts.conf;
    # other directives
}

接下来,测试 Nginx 配置是否正确:

sudo nginx -t

如果没有错误,重新加载 Nginx 以使更改生效:

sudo service nginx reload

最后,该网站中的字体请求现在将从 googleapis.com 转到你的服务器,从而提高字体加载速度。

需要注意的是,此方法应该仅用于使用 Google Fonts 的网站,并需要遵守 Google 的服务条款。