Azure CDN With Azure Web App - Access To Font At CDN Has Been Blocked By CORS Policy

 

 

Introduction

 

Working with Azure web apps is always fun. I was facing a CORS issue in my WordPress web application recently. Here in this post, I am going to share with you the solution that helped me. I was using Azure CDN to serve all my files and all the files were loading fine except the fonts and icons because I was getting the CORS issue. Here is the fix. Preceding is the image of my browser console, where you can see the error clearly.

 

 

 

CORS issue

 

Here is how my blog looked when the icons were not loading.

 

 

Missing icons

 

Fix for “Acces to font CORS policy issue”

 

The first thing to do is to allow requests from all the origins, we can easily do this in Azure web applications. 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.

 

 

 

Allow origins in Azure web app

 

When you are done, just click on the Save button.

 

By default files with .woff2, .woff, and .ttf extensions are not served by IIS in Azure App Service.

 

Azure app service IIS config

 

Now we should edit our web.config file with the configuration for these files. The web.config file will be present in the root folder where your index file is. You can use windows explorer to FTP to get this file or use FTP clients such as FileZilla or use the deployment tool Kudu in the Azure portal.

 

 

There should be separate configuration entries for each font file types. 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>
            <mimeMapfileExtension="woff"mimeType="application/font-woff" />
            <mimeMapfileExtension="woff2"mimeType="application/font-woff2" />
            <mimeMapfileExtension=".ttf"mimeType="application/octet-stream" />
            <mimeMapfileExtension=".ttc"mimeType="application/octet-stream" />
            <mimeMapfileExtension=".otf"mimeType="application/octet-stream" />
        </staticContent>
    </system.webServer>
</configuration>

You can also do this by adding the extension called “Enable Static Web Fonts”. To add an extension, click on the Extensions menu from the left pan and then click on +Add.

 

 

 

Add extension in Azure app

 

Now click on the “Choose extension” option and select the “Enable Static Web Fonts” extension.

 

 

 

Enable static web fonts extension

 

Now accept the legal terms and click OK.

 

Conclusion

 

When you are done configuring, just visit your Azure web application, you should now see that all the fonts and icons are loaded.

 

About the Author

 

I am yet another developer who is passionate about writing and video creation. I have written close to 500 blogs on my blog. And I upload videos on my YouTube channels NjanOru Malayali and Sibeesh Passion. Please feel free to follow me.

• GitHub
• medium
• Twitter

Your turn. What do you think?

 

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.

 

Kindest Regards

Sibeesh Venu