I’m in Azure, CORS, and WOFF hell

2 Views

I have a WordPress site running on Azure Websites and I’m trying to get the Azure CDN setup. I have the endpoint and storage configured. All of the files have been uploaded.

My issue is with WOFF and TTF files. Chrome is reporting a 200 OK status, but the file size is 0KB. The Console in Firebug reveals the CORS issue. The font is definitely not working as I’m just getting a block icon where these fonts are used.

Read More

I have the Azure CORS rules setup. Here’s a snapshot… 

Allowed origins: http://fonts.gstatic.com, http://cdn.devsoftsolutions.com
Allowed methods: Get, Head, Put
Allowed headers: x-ms-*
Exposed headers: x-ms-*
Max age (seconds): 200

Here’s my web.config settings… 

<staticContent>
      <remove fileExtension="svg" />
      <remove fileExtension="eot" />
      <remove fileExtension="woff" />
      <remove fileExtension="ttf" />
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" />
</staticContent>

The site that I’m trying to get this working on is http://dev.devsoftsolutions.com

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. I wonder how do you expect WOFF and TTF to be working when you define more than one mimeMap per extension?! How do you expect IIS to handle this?! You shall only define exactly one mime map per extension (IIS takes the last defined!). Your correct configuration shall look like this:

    <staticContent>
  <remove fileExtension="svg" />
  <remove fileExtension="eot" />
  <remove fileExtension="woff" />
  <remove fileExtension="ttf" />
  <remove fileExtension=".svg" />
  <remove fileExtension=".eot" />
  <remove fileExtension=".woff" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" />
</staticContent>

    And you can always consult IANA on which are the correct mime types. On this demo site you shall be able to see a briefcase icon from WOFF file. You can use browser debugging tools or Fiddler to see that the WOFF is correctly transferred and interpreted by the browser.

    Oh, and another note – you do not need to enable CORS for Google’s fonts! CORS is only required when you want to SEND data using JavaScript or make AJAX calls! Google fonts come to your site with simple script src and CSS @url() for which CORS is not required.