How can i apply woff fonts in Azure for .NEt core app?

Question

I ahve a .Net Core MVC app that uses DinkToPdf, which wraps libwkhtmltox.dll, to create PDF files from HTML. One of the fonts i am using is a .woff font and this works fine on my local machine. However in Azure, the font is not applied.

I have read other threads that state the mimeTypes should be added to FileExtensionContentTypeProvider ofr .Net Core as opposed to the web.config in .Net apps.

var provider = new FileExtensionContentTypeProvider();
        provider.Mappings[".woff"] = "font/woff";
        provider.Mappings[".ttf"] = "font/ttf";
        provider.Mappings[".otf"] = "font/otf";
        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "fonts")),
            RequestPath = "/fonts",
            ContentTypeProvider = provider
        });

I have also tried the different mimeTypes, but believ these are the correct ones. You can see i ahve also added .ttf and .otf to see if Azure had a problem with one and not the other. I am then referenceing the font in css as per below...

@font-face {
font-family: 'barcode';
src: url(../fonts/fre3of9x.woff) format('woff'), url(../fonts/fre3of9x.ttf) format('ttf'), url(../fonts/CODE39.otf) format('otf');
font-weight: normal;
font-style: normal; }

I can't see anything in Azure that i can set so i have hit a brick wall. Can anyone help?

Answer 1

Azure App Service, which I assume you are using, is basically just IIS. IIS doesn't have support for WOFF out of the box. This will require you to add a web.config to the root of your project and make sure that it gets deployed to the App Service. Here is what will need to be in the web.config.

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

Hope this helps.

You may have to explicitly remove the extensions and add them back. This is the one I use in a few websites that I know works.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
  </staticContent>
  </system.webServer>
</configuration>