Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

If you have mixed http and https content, when you might get the Cross-Origin resource issue where, say for example, a font isn't loaded - ending up making your site look incomplete.

This often happens if your website loads all of it's asset over https, but the main page is called over http - A lot of browser will block files (eg fonts) if the protocols are mixed and there is now allowance set up.

There are a number of way around this...

1. You can change your site to redirect all traffic to work over https and make sure all assets are loaded over https
2. You can make sure that your assets (eg Font files) are loaded over the same http or https protocol that the main page is requested in
3. You can allow your site to access it's own assets over the other protocol - so to allow http to load https content for "http://www.yourdomain.uk" you can add the following to the configuration/system.webServer section of your web.config

<httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.yourdomain.uk" />
     </customHeaders>
</httpProtocol>

If you have any issue setting this up and any question please contact us and we'll be happy to help.

Return to Category