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.
- Ensure that the server includes the
'Access-Control-Allow-Origin'
HTTP response header when serving font files. - 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: *