Introduction

This is a solution for web fonts self-hosted CDN. It reduces time latency to Google web fonts server. In our context, it reduced ~7x times (from 200ms to 30ms).

After deploying, you just replace fonts.googleapis.com to your [proxy_fonts_hostname] in stylesheet source.

Example :

<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;subset=vietnamese" rel="stylesheet">

to

<link href="https://fonts.example.com/css?family=Noto+Sans:400,400i,700,700i&amp;subset=vietnamese" rel="stylesheet">

Installation

$ npm install
$ node main.js [proxy_fonts_hostname] [port=3000]

Usage

NGINX configuration file

proxy_cache_path /var/nginx/cdn_cache levels=1:2 use_temp_path=off keys_zone=cdn_cache:1024m max_size=1G inactive=14d;

map $http_user_agent $ua_fonts {
    default 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36';
    ~(MSIE\ 8) 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)';
    ~(MSIE|iPhone|Version) 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)';
}

server {
	listen 443 http2;
	listen [::]:443 http2;

	server_name [proxy_fonts_hostname];
	
	ssl_certificate	 /etc/nginx/key/[proxy_fonts_hostname].crt;
	ssl_certificate_key /etc/nginx/key/[proxy_fonts_hostname].key;

    location /css {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header User-Agent $ua_fonts;
        proxy_redirect off;

        proxy_cache cdn_cache;
        proxy_cache_key "$request_uri$ua_fonts";
        proxy_cache_lock on;
        proxy_cache_lock_age 5s;
        proxy_cache_lock_timeout 5s;
        proxy_cache_methods GET;
        proxy_cache_valid 200 1d;
        proxy_cache_valid any 60s;

        add_header X-Cache-Status $upstream_cache_status;

        expires 7d;
    }

    location / {
        proxy_pass https://fonts.gstatic.com/;
        proxy_http_version 1.1;
        proxy_set_header User-Agent $http_user_agent;
        proxy_set_header Host fonts.gstatic.com;
        proxy_redirect off;

        proxy_cache cdn_cache;
        proxy_cache_key "$request_uri";
        proxy_cache_lock on;
        proxy_cache_lock_age 5s;
        proxy_cache_lock_timeout 5s;
        proxy_cache_methods GET;
        proxy_cache_valid 200 7d;
        proxy_cache_valid any 60s;

        add_header X-Cache-Status $upstream_cache_status;

        expires 7d;
    }
}