CORS Error when Trying to Fetch Font Files from the Customized Login Page

Knowledge Articles
, , , ,
1

Overview

This article explains why custom fonts may not be displayed on a customized login page, and the following Cross-Origin Resource Sharing (CORS) error appears in the browser console when the page attempts to fetch these font files from a third-party URL:

Access to font at ‘’ from origin ‘’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Applies To

  • Customized Login Page
  • CORS

Cause

This issue is caused by the configuration of the 'Access-Control-Allow-Origin' HTTP response header on the third-party server hosting the font files. Specifically, the problem occurs if:

  • The header is missing from the server’s response.
  • The header is present, but does not include <TENANT-DOMAIN> as an allowed origin or specifies an incorrect set of domains.

Solution

To resolve this issue, configure the server that hosts the font files. This server may be an application server or a dedicated file server.

  1. Ensure that the server includes the 'Access-Control-Allow-Origin' HTTP response header when serving font files.
  2. Configure the value of this header to explicitly allow the domain making the font request.
  • For requests from a specific tenant domain, the header should be similar to the following example:Access-Control-Allow-Origin: <TENANT-DOMAIN>
  • If the fonts are intended for public use by any domain and this aligns with security policies, the header can be set to a wildcard, as shown in this example:Access-Control-Allow-Origin: *

Additional information on this Cross-Origin Resource Sharing (CORS) error and the 'Access-Control-Allow-Origin' header is available at: Mozilla Developer Network - CORSMissingAllowOrigin.

Access-Control-Allow-Origin: https://<mtenant>.us.auth0.com

OR

Access-Control-Allow-Origin: *

1 Like