CODEWITHSUNDEEP
css.htaccessiiscross-domainumbraco
ClosDesign
ClosDesign

Reputation: 3924

Cross domain @font-face from main site and subdomain

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?

Upvotes: 1

Views: 2026

Answers (1)

Jan Bluemink
Jan Bluemink

Reputation: 3487

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

Upvotes: 1

Related Questions