Assets (Deprecated): Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

NOTE: This doc is only relevant for the now deprecated Assets addon. If using the now recommended Assets Pull addon, please see the Configure CORS to Resolve Web Font Issues doc.

When using the Assets addon to serve your site’s JS, CSS and other files, you may encounter broken fonts along with this error, if your theme or plugins make use of web fonts that are referenced in their stylesheets:

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.

Enabling CORS on S3 Buckets

To ensure that browsers are able to access the font files stored on S3, follow these steps:

1. Navigate to your AWS console and the S3 service
2. Select the bucket you are using to store your assets
3. Click the Permissions tab
4. Click CORS configuration to reveal the CORS configuration editor

AWS will present you with a default XML configuration that will work just fine:

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

However, as it is your site requesting the font resources, it is a good idea to limit the ‘AllowedOrigin’ to your domain:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://www.mysite.com</AllowedOrigin>
        <AllowedOrigin>https://www.mysite.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

CloudFront

If you are using CloudFront as your CDN and you want to use the example CORS configuration that limits requests from only your site, then you will need to decide which type of request your site will use: HTTP or HTTPS.

The above example allows requests from both protocols, however, CloudFront will cache the response from the first request and if it receives a subsequent request from a different protocol it will fail. Therefore if your site is using HTTP, only include that in the configuration and vice versa for HTTPS.

You also need to ensure that the ‘Origin’ header is whitelist under ‘Whitelist Headers’.

If you are already serving assets via CloudFront and later add the CORS configuration to your S3 bucket you will need to perform a purge from within the WP Offload Media settings screen. This will ensure that the new CORS settings are pushed to CloudFront.