Search code examples
.netcsshostingfont-faceappharbor

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

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>
Solution

  • 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)