Assets Pull: Configure CORS to Resolve Web Font Issues

If you notice that font files aren’t loading correctly, or receive the following error in the browser console then you need to modify your server configuration.

This is because web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is a way for a remote host to control access to certain types of resources.

To resolve this issue you need to ensure that your server is sending the correct Access-Control-Allow-Origin header when font files are requested. If you’re unable to modify your server configuration please contact your web host and link them to this article.

Apache

Add the following block to your .htaccess file:

<FilesMatch ".(eot|otf|ttf|woff|woff2)">
    Header always set Access-Control-Allow-Origin "*"
</FilesMatch>

Nginx

Add the following location block to your virtual host file (usually within the server directive) and reload Nginx:

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

Invalidate CloudFront Distribution

Once the changes have been made you will need to invalidate the CloudFront cache with a path of “/*”.