@font-face working fine over localhost but NOT in AppHarbor

Question

I am facing a problem while hosting my application over a AppHarbor. I’ve a basic application over .net MVC 3.. In this application I’ve used the @font-face property to display content in custom fonts:

@font-face {
font-family: facefont;
src: url("raleway_thin.otf");
} 
body {    
font-size: .85em;
font-family: "facefont", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}

When I run this application through my development server in loaclhost in works all fine with the content being shown in the custom font. But when I pushed my webapp over AppHarbor here:

testapp over AppHarbor

It’s no more showing the content in the custom font that I’ve used in .css . Am confused about it as am using same browser (Chrome 15.0) to view both but they are giving different results.

Kindly help.

---

I just worked out the this is happening only with the font files [*.otf, *.ttf].. I put an image in the same folder and its been added perfectly but again it failed to get the font file and displaying 404 over it.

---

Also done with configuring mimeTypes:

<staticContent>
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
    </staticContent>

Answer 1

In order get deploy ".woff" format fonts to Appharbor i had to do two things:

1: Include the font in my visual studio project, ensuring it's "Build" property was set to "Content" (as described above by @Korayem)
2: Add the follow config to Web.config:

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

Answer 2

Your stylesheet is not in available at the location your page references it. This url serves up a 500: http://testapp-216.apphb.com/Content/Site.css

You should verify that AppHarbor deploys the relevant .css and font files. This is most easily done by downloading the build output package from AppHarbor and checking its content. If it's not there, you most likely need to set "Build Action" to "Content" in the project file reference.

It's also important that mimetypes are configured correctly.

(disclaimer, I'm co-founder of AppHarbor)

Answer 3

The problem is that the font file .otf is not served from the AppHarbor server as there is no MIME type configured specifying how to serve it.

See here how to add MIME types using Web.config: http://www.iis.net/ConfigReference/system.webServer/staticContent/mimeMap

The MIME type you need to configure is font/otf

Something like:

<mimeMap fileExtension=".otf" mimeType="font/otf" />

Answer 4

Your stylesheet is located at /Content/Site.css and you are referencing your fonts in this file with "raleway_thin.otf" which is relative to the CSS file. Therefore it is expecting this file path to exist /Content/raleway_thin.otf

I'm not familiar with appharbour, but make sure all your files are case sensitive (i.e. causes windows to unix/linux issues).

Otherwise, does the web server prevent certain file extensions from being loaded from the directory in question. On apache you can tell it which file types are allowed to be used in a directory.

Having said that 404 means your URL http://testapp-216.apphb.com/Content/raleway_thin.otf does not exist