ScaleScaleScaleScale

Tips / Nginx


How to Configure Nginx + CDN to Serve Cross Domain Web Fonts

Since the introduction of the internet and the beginning of web design, developers and designers were always forced to use the standard fonts located on their computers. However, in recent years web fonts became a new standard in web development. Web fonts help devs and designers to offer great quality and variety in their web apps.

One of the most common issues while using web fonts and CDN services is the fact that sometimes web fonts don’t load or are missing while browsing the websites. It’s a normal issue on modern web templates and themes with web fonts delivered trough CDN services.

Why is the web font not loading?

The answer to this question is simple. Browsers like Chrome, Firefox, and Internet Explorer will refuse to embed the web font when they detect that it’s coming from a 3rd party URL, assuming it’s a security risk you need to avoid. It’s just a cross-domain font request that is not allowed by default.

How can you fix it on Nginx?

If you are using Nginx and a CDN service, you need to include a custom CORS configuration inside the Nginx configuration. Consider the following examples.

Open your Nginx configuration file for your website:

nano -w /etc/nginx/conf.d/yoursite.com.conf

Then, inside the server {} block, use one of these two configurations:

1) If you don’t have an explicit static file configuration, just add a new location block for the web fonts:

location ~ .(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$ {
add_header Access-Control-Allow-Origin "*";
}

2) Or modify your current static configurations and add the web fonts extensions:

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 Nginx to apply changes:

service nginx reload

A full Nginx configuration looks like this:

### 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;
        }
}

Test that web fonts are working properly

  • Clear your CDN cache completely; if you are using MaxCDN, it can be done instantly from inside your control panel.
  • Clear your browser cache.
  • Try loading your website again; it should be displaying the web fonts without any issues.

What if web fonts still do not load after this?

If web fonts still don’t load, it’s probably a misconfiguration in Nginx; or you forgot to reload Nginx to apply changes. Debug using curl -I to determine if the CORS configuration is present in your headers:

[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: *

As you see, if the “Access-Control-Allow-Origin: *” configuration is present, then it’s working. Otherwise, your Nginx configuration was not successful. You will need to double check to ensure that you have web fonts extensions allowed in your CORS configuration.

If you are using MaxCDN as your CDN provider and not using Nginx as the default webserver, check out this great post that may help you to configure CORS on Apache & IIS: How to use CDN with Web Fonts

Popular search terms:

  • CDN nginx domain
  • nginx font No \Access-Control-Allow-Origin\
  • nginx cdn cors
  • nginx cdn static
profile

Esteban Borges

Linux Geek, Webperf Addict, Nginx Fan. CTO @Infranetworking

  • Hi Esteban,

    Your example is very detailed, thank you. In addition, you may correct font’ mime type headers. For example:

    application/font-woff2 woff2;

    See: http://zinoui.com/blog/cross-domain-fonts

  • Gravefield

    Thx with your help I Fix this problem in 2minutes. Really, thx you !