Azure bootstrap fonts

Question

Can't seem to solve this, im pusing a custom bootstrap css&fonts into my azure cdn but in chrome I keep getting "Font from origin 'http://azxxxxxx.vo.msecnd.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost.domain:16300' is therefore not allowed access.

I modified my bootstrap css

font-face {
  font-family: 'Glyphicons Halflings';

  src: url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.eot');
  src: url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

I've read a few stackoverflow posts, added the following to my webconfig

    <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
 <staticContent>
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
    </staticContent>

Still have the same issue, any ideas?

score 3 · Accepted Answer · answered Jan 05 '15 at 16:28

Assuming you've uploaded fonts/CSS to Azure Storage fronted with Azure CDN.

You need to enable CORS on the storage to allow your site to access fonts cross-domain.

The complete steps are covered in Windows Azure Storage: Introducing CORS

Partial sample from the article (you'll need to get NuGet for recent Azure client libraries to build it):

private static void InitializeCors()
{
  // CORS should be enabled once at service startup
  // Given a BlobClient, download the current Service Properties 
  ServiceProperties blobServiceProperties = BlobClient.GetServiceProperties();
  ConfigureCors(blobServiceProperties);
  BlobClient.SetServiceProperties(blobServiceProperties);
}

private static void ConfigureCors(ServiceProperties serviceProperties)
{
  serviceProperties.Cors = new CorsProperties();
  serviceProperties.Cors.CorsRules.Add(new CorsRule()
  {
     AllowedHeaders = new List<string>() { "*" },
     AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Head,
     AllowedOrigins = new List<string>() { "*" },
     ExposedHeaders = new List<string>() { "*" },
     MaxAgeInSeconds = 1800 // 30 minutes
 });
}

score 2 · Answer 2 · edited May 23 '17 at 12:32

2

Looks like you are missing some more steps (and custom headers). Take a look at this answer, it may have what you need - request on Azure Websites fails due to CORS

edited May 23 '17 at 12:32

Community

1
1

answered Dec 31 '14 at 18:18

score 2 · Answer 3 · answered Jan 07 '15 at 02:46

I believe this is issue I had not too long ago. It was a bear to track down. In the end, what worked for me was to add the MIME types for the various font formats. Apparently, Azure's images for their servers do not include them properly already. Here's an update to your web.config file to try.

<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".svg" />
            <remove fileExtension=".eot" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Note the updated mimeType values. Good luck!

score 1 · Answer 4 · answered Dec 31 '14 at 12:54

Do this.

IIS ver 7.5+

<system.webServer> <httpProtocol> <customHeaders> <add name="access-control-allow-origin" value="*" /> <add name="access-control-allow-headers" value="content-type" /> </customHeaders> </httpProtocol> </system.webServer>

IIS ver < 7.5

<system.webServer> <httpProtocol> <customHeaders> <add name="access-control-allow-origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer>

Is this just not a repeat of what I said didn't work? – D-W Jan 05 '15 at 16:02 — D-W, Jan 05 '15 at 16:02

score 0 · Answer 5 · answered Dec 31 '14 at 13:07

0

A completely different approach would be to encode the eot files as base64 and embed them directly into your CSS file. I had to do this recently for a HTML windows store app when I could not access a .woff font file

answered Dec 31 '14 at 13:07

roryok

8,545
16
65
130

Azure bootstrap fonts

5 Answers5

Linked