Blog of Raivo Laanemets

Bootstrap version 3.3.2 includes Glyphicons in the new font file format woff2. This can cause issues with CORS when the CORS header Access-Control-Allow-Origin is not configured but the font is served from a CDN. The second issue can be a missing mime type for .woff2 files.

The CORS error can be seen in the Chrome debugger as:

Font from origin 'https://d32pkxgjq5gvfg.cloudfront.net' has been blocked from loading by Cross-Origin
Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://example.com' is therefore not allowed access.

The issue does not occur when fonts are served from the same location as the main site. Unfortunately the debugger does not show exactly which resource caused the error. The blocked request does not even show up in the Network section of the debugger. Bootstrap Glyphicons keep working as CSS falls back to normal .woff file. The error can be fixed by adding the proper CORS header. The correct Content-Type header value should be set too.

There has been some confusion over the correct content type name. The spec clearly says:

Type name:
    font
Subtype name:
    woff2

which makes it font/woff2. This is also what Google Fonts uses. If you use Nginx, then add a separate location block to set the Content-Type header (along with the CORS header and other settings that you use for serving static files):

location ~* \.woff2$ {

    add_header "Access-Control-Allow-Origin" "*";
    add_header "Content-Type" "font/woff2";
    try_files $uri @upstream;
}

When you use Amazon CloudFront CDN and have set up cache busting then nothing else has to be done. CloudFront will automatically forward CORS headers. This might be different for other CDN providers and the CDN configuration might have to be updated as well.

Hopefully this helps to track down and fix those CORS errors in Chrome debugger.