Azure WebApp not loading my fonts

Question

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.

I'm using same block of code as article pointed, little bit different but same.And it works.Same environment as yours. I can post it if you want ? — Ameya, Aug 06 '17 at 17:24
Yes, please. Maybe it will help me too. Post it as an answer. — Jakub, Aug 06 '17 at 17:44

score 18 · Accepted Answer · answered Aug 07 '17 at 05:46

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.

This worked for me but I had to have the `mimeType` of the `.woff2` file also set to `application/font-woff` (without the `2` for _Azure_ to pick it up). — War10ck, Oct 03 '18 at 14:43

score 2 · Answer 2 · answered Aug 06 '17 at 18:03

2

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>

answered Aug 06 '17 at 18:03

Ameya

726
6
9

Unfortunately, it fails too :( – Jakub Aug 06 '17 at 18:17
Jakub, I just tried woff fonts without any configuration in web.config file. And yet still work. Check out font url mentioned in stylesheet or on page. – Ameya Aug 07 '17 at 06:48

score 0 · Answer 3 · answered Aug 16 '23 at 13:01

It's been a couple of years, but maybe this one is also of some help: In my case, the above was also something I had to fix.

But additionally, running the app on Azure App Service showed, that the URL to the font files was not correctly resolved.

In my solution folder, the structure looks like this:

Content
  simple-line-icons
    css
      simple-line-icons.css
    fonts
      Simple-Line-Icons.eot
      Simple-Line-Icons.svg
      etc.

The css file references the fonts like this:

@font-face {
    font-family: 'simple-line-icons';
    src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0');
    src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'), 
         url('../fonts/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'), 
         url('../fonts/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'), 
         url('../fonts/Simple-Line-Icons.woff?v=2.4.0') format('woff'), 
         url('../fonts/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
    font-weight: normal;
    font-style: normal;

Because the relative reference to ../fonts/file.ext points to the respective font files, everything works, right?

Wrong.

It works as long as this code is being executed locally.

When run on Azure App Service, I had to rewrite it, so that the references point to "../content/simple-line-icons/fonts/file.ext"

Actually, I don't quite know why this is, but as stated earlier: Maybe this helps anyone stumbling over this old thread and also having trouble getting things to work even though the mime types are registered properly.

Oh, speaking of Azure App Service: There is a free plugin that adds the correct lines to the config for supporting static web fonts available in the Azure Store (https://github.com/johnnyqian/enable-font-awesome-site-extension)

Azure WebApp not loading my fonts

3 Answers3

Linked