Azure bootstrap fonts

Question

It is not possible to solve this problem by inserting custom bootstrap css and fonts into my azure cdn, but in chrome I keep getting the “Font from source” http://azxxxxxx.vo.msecnd.net 'has been blocked from loading by Cross-Origin resource sharing policy : No 'Access-Control-Allow-Origin' header is present in the requested resource. Therefore, the source address http: //localhost.domain: 16300 'is not allowed.

I changed 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 read some 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 problem, any ideas?

Answer 1

Assuming you uploaded fonts / CSS to Azure Storage using Azure CDN.

You need to enable CORS in the repository so that your site can access cross-domain fonts.

Complete steps are described in Windows Azure Storage: an introduction to CORS.

Partial selection from the article (you will need to get NuGet for the latest Azure client libraries to create 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 }); } 

Answer 2

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

Answer 3

I think this is a question that I had not so long ago. It was a bear to hunt down. In the end, what worked for me was to add MIME types for various font formats. Apparently, Azure images for their servers no longer include them properly. Here you can update the web.config file.

 <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> 

Check out the updated mimeType values. Good luck

Answer 4

Do it.

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>

Answer 5

A completely different approach would be to encode the eot files as base64 and embed them directly in your CSS file. I had to do this recently for an application for storing HTML files when I was unable to access the .woff font .woff