In ASP.NET, how do I add a CORS header for only TTF files?

Question

I have a page with an iframe that shows an external page. The external page is configured to download a CSS file from my server.

In the CSS, I added a @font-face selector:

@font-face {
    font-family: "Special Font";
    src: url("<%= Request.Url.GetLeftPart(UriPartial.Authority) + "/fonts/specialfont.ttf" %>");
}

This downloads and shows the font fine in Chrome, but in Firefox, it downloads the font, but refuses to use it. Doing a little bit of research shows that this problem is a cross-origin policy issue. One of the solutions mentioned here:

http://enable-cors.org/

Is to enable the CORS header. However, the solution it provided is site-wide:

<?xml version="1.0" encoding="utf-8"?>
    <configuration>
        <system.webServer>
            <httpProtocol>
                <customHeaders>
                    <add name="Access-Control-Allow-Origin" value="*" />
                </customHeaders>
            </httpProtocol>
        </system.webServer>
</configuration>

Whereas I would only like to enable it for only .TTF files. Is there a way to do this, either through using a HttpHandler or some other method?

score 13 · Answer 1 · edited May 23 '17 at 12:25

13

You can achieve something similar by using the location element in web.config to restrict configuration rules to a particular directory or file. For example:

<configuration>
  <location path="fonts/specialfont.ttf">
    <system.webServer>
       <httpProtocol>
          <customHeaders>
             <add name="Access-Control-Allow-Origin" value="*" />
          </customHeaders>
       </httpProtocol>
    </system.webServer>
  </location>
</configuration>

Although you may wish to enable CORS for all fonts, e.g. <location path="fonts">.

The answers to this question has a couple more examples of location.

edited May 23 '17 at 12:25

Community

1
1

answered Oct 30 '14 at 22:45

Jeremy

2,642
18
36

Thanks, this helped! – Costin_T Sep 10 '20 at 15:56
In case you start getting 500 errors when you add this, you might want to remove any existing value for that fonts path before adding a new CORS value, eg: `` before doing the `` – keithl8041 Oct 15 '20 at 11:33

In ASP.NET, how do I add a CORS header for only TTF files?

1 Answers1