CORS Error with ttf font file on Azure CDN

Question

I have a CDN I have created using the Verizon Premium SKU. when it comes to fonts I get "from origin 'https://myfqdn.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"

However, I have followed this doc https://docs.microsoft.com/en-us/azure/cdn/cdn-cors with no luck.

However, if I go to my https://cdn.myfqdn.com (yes I have a custom domain and https enabled) the page loads however with no issues.

Here is the XML from the rule that I created from the doc above.

 <rules schema-version="2" rulesetversion="6" rulesetid="945266" xmlns="http://www.whitecdn.com/schemas/rules/2.0/rulesSchema.xsd">
  <rule id="1823263" platform="http-large" status="active" version="3" custid="A76A4">
    <!--Changed by userId: 952 on 02/25/2019 03:45:01 PM GMT-->
    <!--Changed by [email protected] on 02/25/2019 03:25:23 PM GMT from IP: xxx.xxx.xxx.xxx-->
    <description>Wildcard</description>
    <!--If-->
    <match.request-header.wildcard name="Origin" result="match" value="Https://myFQDN.com" ignore-case="true">
      <feature.set-request-header action="set" key="Access-Control-Allow-Origin" value="*" />
      <feature.set-request-header action="set" key="Access-Control-Allow-Headers" value="*" />
      <feature.set-request-header action="set" key="Access-Control-Allow-Methods" value="GET, HEAD, OPTIONS" />
      <feature.set-request-header action="set" key="Access-Control-Expose-Headers" value="*" />
    </match.request-header.wildcard>
  </rule>
</rules>

Thanks for your help

Sibeesh Venu Sibeesh Venu · Accepted Answer · 2020-08-14T10:50:49

I was also facing this issue in my blog. All the files were loading from the CDN except fonts and icons. I had to do two things. One is to allow all the origins in the Azure web app and the other is to configure the files in IIS by editing the web.config.

Just login to your Azure portal, and go to your Azure web application. Click on the CORS menu under API and * as the allowed origin.

By default files with .woff2, .woff, and .ttf extensions are not served by IIS in Azure App Service. That is the reason for this CORS issue. We will add these configurations in the system.webServer tag which is the child tag of configuration tag.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
     <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".ttc" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".otf" mimeType="application/octet-stream" />
    </staticContent>
  </system.webServer>
</configuration>

You can also do this by adding the extension called “Enable Static Web Fonts”. I have written a detailed blog about this, you can read it here.

CORS Error with ttf font file on Azure CDN

1 Answers