Everytime you decided to use a webfont on your web, you think about Google Web Fonts, which is the best CDN for webfonts at this moment.
So why Google Fonts is good solution :
- Have many popular and updated fonts
- Global CDN
- Easy UX to get started
- Auto detects user’s browser then return supported font type (TTF, WOFF or WOFF2)
- It’s a tracking endpoint (collect data to Google)
- Network latency (you have a CDN in your country)
We use a simple Node server and NGINX with proxy cache mod to resolve this case.
Firstly, simple Node server will proxy your CSS request to CSS endpoint belonged to Google, then replace Google hostnames to your new hostname.
Secondly, NGINX tries to detect your browser via User-Agent header, then forward the same User-Agent type to origin Google server.
Lastly, NGINX server will proxy all fonts request to Google fonts server and cache the file in local system then serve same request later.
Source code is here : https://github.com/khanhicetea/google-fonts-resolver
$ npm install
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;
- Restart your NGINX server !
- Try to select a web font on Google Fonts
- Replace import url hostname to your hostname
- Enjoy the speed !!!!!
Place your webfont import url to a
preload link tag to ask the browser load the style immediate after loading HTML
<link rel="preload" href="https://[your-font-cdn]/css?family=Noto+Sans:400,400i,700,700i&subset=vietnamese" type="style">
When I tried this solution with our CDN located in Vietnam, the result is better than 3-7 times (reduce latency and download time).