This help article will guide you through the process of diagnosing and resolving font display issues on your website. Even when the CSS is correctly assigning fonts, they may not display due to font license restrictions or server-side CORS policy blocks. In this article, we will discuss how to identify the root cause and provide solutions for each issue.
Diagnosing Font Display Issues
Step 1: Identify CORS Errors or Font-License Issues
To determine whether the font display issue is related to CORS or font-license, follow these steps:
1. Open your website in a web browser.
2. Right-click on the page and select "Inspect" to open the developer tools.
3. In the developer tools, click on the "Console" tab.
4. Look for an error message containing phrases like "Access to fetch at 'BRANDING ASSET' from origin 'CUSTOM DOMAIN' has been blocked by CORS policy: Cannot parse Access-Control-Allow-Headers response header field in preflight response."
If you see an error message similar to the one above, the issue is likely related to CORS or font-license restrictions.
Step 2: Resolve Font-License Issues
If the issue is related to font licensing, you will need to update your font license to include the necessary domains. Inform the customer that they need to add their Custom Domain, Placeholder URL, and/or their Staging URL to their font license.
Step 3: Resolve CORS Issues
In some cases, your server may be configured to block external access to font assets. To resolve this issue, you may need to work your their IT team to modify the server configuration. The IT team should add the "Access-Control-Allow-Origin" header to their server's font asset responses and allow their custom domain.
If you prefer to use wildcards to accomplish this, you can do so by setting the "Access-Control-Allow-Origin" header to "*" (allowing all origins).
Adding a Custom Font via CSS
To include a custom font on your website, you can use the
@font-face rule in your CSS file. Follow these steps to add a custom font:
Obtain the font file in a web-compatible format (e.g.,
.otf). Ensure that you have the appropriate license to use the font on your website.
Upload the font file to your server or a file hosting service, and make note of the URL where the file is hosted. (ex. cyberduck).
In your CSS file, add the
@font-facerule with the following structure:
INSERTFONTNAMEwith a unique name for the font (e.g., 'CustomFont'),
INSERTURLwith the URL of the hosted font file.
By following the steps outlined in this help article, you can effectively diagnose and resolve font display issues related to font-license restrictions and CORS policy blocks.