Introduction

Working with Azure web app 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.

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

Fix for “Acces to font CROS policy issue”

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

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.

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.

Now click on the “Choose extension” option and select the “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, 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 Njan Oru 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