Skip to main content

How can we help?

Search

Troubleshooting Font Display Issues: Addressing Font-License and CORS Policy Errors

Updated: Katlin at Concept3D Edited:

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

- Important Note -

This functionality requires a subscription to Localist's Developer Theming package.

If you do not see the option to Edit HTML or Custom CSS containers, please reach out to support@concept3d.com or your dedicated Client Success Manager to learn more!

 

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:

  1. Obtain the font file in a web-compatible format (e.g., .woff, .woff2, .ttf, or .otf). Ensure that you have the appropriate license to use the font on your website.

  2. 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).

  3. In your CSS file, add the @font-face rule with the following structure:

  4. @font-face {
    font-family: 'INSERTFONTNAME';
    src: url('INSERTURL')
  5. Replace INSERTFONTNAME with a unique name for the font (e.g., 'CustomFont'), INSERTURL with the URL of the hosted font file.

Conclusion

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.

Related articles