Need help loading Fonts into webpage from Azure

Question

I am having trouble loading my fonts from Azure into my css/html, making them not appear on my page. Here is my code

CSS:@font-face {
font-family: 'DTLArgo-Bold';
src: url('../fonts/dtlargot-bold-webfont.eot');
src: url('../fonts/dtlargot-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/dtlargot-bold-webfont.woff') format('woff'),
     url('../fonts/dtlargot-bold-webfont.ttf') format('truetype'),
     url('../fonts/dtlargot-bold-webfont.svg#dtl_argot_bold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'dtl_argot_regular';
src: url('../fonts/dtlargot-webfont.eot');
src: url('../fonts/dtlargot-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/dtlargot-webfont.woff') format('woff'),
     url('../fonts/dtlargot-webfont.ttf') format('truetype'),
     url('../fonts/dtlargot-webfont.svg#dtl_argot_regular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'DTLArgoT-Light';
src: url('../fonts/dtlargot-light-webfont.eot');
src: url('../fonts/dtlargot-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/dtlargot-light-webfont.woff') format('woff'),
     url('../fonts/dtlargot-light-webfont.ttf') format('truetype'),
     url('../fonts/dtlargot-light-webfont.svg#dtl_argot_light') format('svg');
font-weight: normal;
font-style: normal;

}

.font{
font-family: DTLArgoT-Light, Arial, sans-serif;
}


Azure Web.config:
<?xml version="1.0"?>

<configuration>

<system.web>
    <compilation debug="false" targetFramework="4.0" />
</system.web>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
<staticContent>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />  
  <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>

My file structure is root then two folders, one called fonts(for fonts) and the other css(for css). Any help would be appreciated. Thanks!!

Answer 1

Are you using Azure Websites, Azure Webrole or Azure Virtual Machine? Are you developing using just plain HTML, or ASP.NET or PHP or Node?

Asuming you are on the Websites, you have to change a file named web.config which is located in the site folder of your web site.

Here is an example of a very simple web.config which registers WOFF files for serving by Azure Websites:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

You may also want to add a mimeMap for all the web-font extensions you use. But be careful to select to correct mime-type, because it may no work. For instance most of the users add application/x-font-woff and it may not work for them, because the RFC, which now is final states it should be application/font-woff.