Kể từ khi sự ra đời của internet và sự khởi đầu của thiết kế web, các nhà phát triển và các nhà thiết kế luôn buộc phải sử dụng các phông chữ chuẩn nằm trên máy tính của họ. Tuy nhiên, trong những năm gần đây các phông chữ web đã trở thành một tiêu chuẩn mới trong phát triển web. Web font giúp devs và designs cung cấp chất lượng tuyệt vời và đa dạng trong ứng dụng web của họ. Một trong những vấn đề thường gặp nhất khi sử dụng phông chữ web và dịch vụ CDN là đôi khi các phông chữ web không load hoặc mất tích trong khi duyệt các trang web. Đó là một vấn đề bình thường trên các mẫu web hiện đại và chủ đề với phông chữ web. Tại sao các phông chữ web không load? Câu trả lời cho câu hỏi này là đơn giản. Các trình duyệt như Chrome, Firefox và Internet Explorer sẽ từ chối nhúng phông chữ web khi họ phát hiện ra rằng nó đến từ một URL bên thứ 3, đây giống như một cách để tăng cường bảo mật. Làm thế nào bạn có thể sửa chữa nó trên Nginx? Nếu bạn đang sử dụng Nginx và dịch vụ CDN, bạn cần bao gồm một cấu hình tùy chỉnh CORS bên trong các cấu hình Nginx. Hãy xem xét các ví dụ sau đây. Mở tập tin cấu hình virtual host Nginx của bạn: Mã: nano -w /etc/nginx/conf.d/yoursite.com.conf Sau đó, bên trong các khối server {}, sử dụng một trong hai cấu hình này: 1) Nếu bạn không có một tập tin cấu hình tĩnh rõ ràng, chỉ cần thêm một khối location mới cho các phông chữ web: Mã: location ~ .(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$ { add_header Access-Control-Allow-Origin "*"; 2) Hoặc sửa đổi cấu hình tĩnh hiện tại của bạn và thêm các phần mở rộng phông chữ web: Mã: location ~* .(gif|jpg|jpeg|png|ico|wmv|3gp|avi|mpg|mpeg|mp4|flv|mp3|mid|js|css|wml|swf|ttf|ttc|otf|eot|woff|woff2)$ { add_header Access-Control-Allow-Origin "*"; expires max; } Reload lại Nginx để áp dụng những thay đổi: Mã: service nginx reload Một cấu hình Nginx đầy đủ trông như thế này: Mã: ### yourwebsite.com server { log_not_found off; error_log logs/yourwebsite.com-error_log crit; listen 80; server_name yourwebsite.com www.yourwebsite.com; root /var/www/yourwebsite.com; index index.php index.html index.htm; # Static stuff cache configuration location ~* .(gif|jpg|jpeg|png|ico|wmv|3gp|avi|mpg|mpeg|mp4|flv|mp3|mid|js|css|wml|swf|ttf|ttc|otf|eot|woff|woff2)$ { add_header Access-Control-Allow-Origin "*"; expires max; } # WordPress Permalinks configuration location / { try_files $uri $uri/ /index.php?$args; } # php-fpm configuration location ~ .php$ { try_files $uri =404; fastcgi_pass unix:/tmp/php5-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; fastcgi_buffer_size 128k; fastcgi_buffers 256 4k; fastcgi_busy_buffers_size 256k; fastcgi_temp_file_write_size 256k; } } Kiểm tra rằng các phông chữ web có đang làm việc Xóa hoàn toàn bộ nhớ cache CDN của bạn; nếu bạn đang sử dụng MaxCDN, nó có thể được thực hiện ngay lập tức từ bên trong bảng điều khiển của bạn. Xóa bộ nhớ cache của trình duyệt của bạn. Thử tải lại trang web của bạn một lần nữa; nó phải hiển thị các phông chữ web mà không xảy ra bất kỳ vấn đề gì. Điều gì nếu phông chữ web vẫn không tải sau khi cấu hình? Nếu phông chữ web vẫn không tải, nó có thể là một cấu hình sai trong Nginx; hoặc bạn quên reload lại Nginx để áp dụng thay đổi. Debug dùng curl -I để xác định cấu hình CORS có xuất hiện trong phần đầu của bạn: Mã: [webtech@localhost ~]$ curl -I http://www.yourwebsite.com HTTP/1.1 200 OK Server: nginx Date: Fri, 28 Aug 2015 14:12:39 GMT Content-Type: text/html; charset=UTF-8 Connection: keep-alive X-Pingback: https://www.yourwebsite.com/xmlrpc.php Strict-Transport-Security: max-age=15724800; includeSubdomains; preload X-Frame-Options: DENY X-Content-Type-Options: nosniff Access-Control-Allow-Origin: * Như bạn thấy, nếu dòng "Access-Control-Allow-Origin: *" có tồn tại, thì bạn đã thành công. Nếu không, cấu hình Nginx của bạn đã không thành công. Bạn sẽ cần phải kiểm tra để đảm bảo rằng bạn có tiện ích web font được cho phép trong cấu hình CORS của bạn . Nếu bạn đang sử dụng MaxCDN là nhà cung cấp CDN của bạn và không sử dụng Nginx là webserver mặc định, kiểm tra bài đăng này nó có thể giúp bạn cấu hình CORS trên Apache và IIS: Làm thế nào để sử dụng CDN với Web Fonts