1

I checked some other solutions on StackOverflow and did not find the answer I am needing so I am asking this.

I have a site 'subdomain.myexamplesite.com' and my main website 'myexamplesite.com'.
I am hosting my CSS on 'myexamplesite.com' for the 'subdomain.myexamplesite.com' because I wanted to have all the CSS files in one place.

I don't have any issues with cross domain issues doing the hosting of the CSS files this way. Everything renders great.

The issue I have now is, I am using an @font-face and trying to get that to my subdomain site. But I am getting a cross domain error:

Font from origin 'https://www.myexamplesite.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://subdomain.myexamplesite.com' is therefore not allowed access.

The main website is a .Net website (Umbraco CMS to be exact) hosting on an IIS server. The other site is a different .Net site but still is hosted on IIS. Since it is IIS, I don't think .htaccess file applies in my case. I have a crossdomain.xml on my main website to allow access from my subdomain just to be sure. But that does not work.

I am referencing the font file correctly in the CSS for my subdomain site otherwise I don't think I would be getting the Font cross domain error. Does anyone have any suggestions if it is possible to host fonts on my main domain and allow the sub domain site to use those same fonts.

Any ideas?

ClosDesign
  • 3,894
  • 9
  • 39
  • 62

1 Answers1

1

For a font file you need to set Access-Control-Allow-Origin http header.

To set it on all files add this to the web.config 

<httpProtocol>
  <customHeaders>
    <remove name="Cache-Control" />
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
  </customHeaders>
</httpProtocol>

Or more specific add something like this to the web.config below the <system.webServer> and set the location path to your font file.

    <location path="static/fonts/source-sans-pro-regular.ttf" inheritInChildApplications="false">
        <system.webServer>
          <httpProtocol>
            <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
          </httpProtocol>
        </system.webServer>
  </location>

See cross-domain-fonts

and 59378-Centralized-Umbraco-7-Dashboards-Access-Control-Allow-Origin

and access-control-allow-origin-multiple-origin-domains

and font-face-fonts-only-work-on-their-own-domain

Community
  • 1
  • 1
Jan Bluemink
  • 3,467
  • 1
  • 21
  • 35
  • Hi Jan, Thanks for the pointers. Would this config setting going on the subdomain config or the host config? Or would it just be good to do both? – ClosDesign Feb 29 '16 at 18:49
  • On the site where the font file is hosted, in your case the main website. if you have a load balancer or other infra it is also possible to add the headers on a other place than the web.config – Jan Bluemink Mar 01 '16 at 07:21
  • Awesome. Thank you for the response. Will give it a try and let you know and if works, of course will mark it as the solution. Much appreciated. – ClosDesign Mar 02 '16 at 15:28