Menu
I have a little problem with my WebApp on Azure. My custom fonts are rendered properly on my localhost, but when I deploy my project to Azure and visit the WebSite, the WebBrowser is notifying me that my fonts couldn't be found (error 404). But when I visit the FTP Server from Azure Portal I can find those Fonts. I also tried solution from this link: http://www.codepal.co.uk/show/WOFF_files_return_404_in_Azure_Web_Sites
But sadly without any progress.
233
I have a little problem with my WebApp on Azure. My custom fonts are rendered properly on my localhost, but when I deploy my project to Azure and visit the WebSite, the WebBrowser is notifying me that my fonts couldn't be found (error 404). But when I visit the FTP Server from Azure Portal I can find those Fonts
The reason is that these formats do not exist in the MIME type list for IIS, if you still having problems and IIS still is not serving the files after adding MIME types, as Amey Vaidya said, you can try to remove the MIME type declaration before redeclaring MIME type declaration for these font files.
Same issue on my side:
Project folder structure
Note: I am using sansation_light.woff.
Default.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
@font-face {
font-family: myFirstFont;
src: url(/fonts/sansation_light.woff);
}
#cont {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>hello world</div>
<br />
<div id="cont">hello world</div>
</body>
</html>
404 error
After adding MIME type, it works fine.
<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
Besides, please make sure you specify the correct URL of the font file in src property of @font-face rule. if possible, you can test my sample code on your Azure web app environment and check if it works, and if something wrong with your Azure web app environment that causes the issue, you can try to deploy your project to a new Azure web app and check if it can work.
53
Add this to your web.config. Remove any previous ones. Clean project and Build it again.
<system.webServer>
<staticContent>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>
</system.webServer>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
