[RESOLVED]Can't get custom @font-face to work on server (mvc4 site)

The site is http://test.conscientia.se , please have a look. I have literaly been sitting here for hours trying to get my Helvetica Neue fonts to work.

I am using following font-face declarations in application.css

@font-face { 
    font-family: HelveticaNeue; 
    src: url('/fonts/HelveticaNeue/eot/HelveticaNeue.eot'); /* IE9 Compat Modes */
    src: url('/fonts/HelveticaNeue/eot/HelveticaNeue.eot') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/HelveticaNeue/woff/HelveticaNeue.woff') format('woff'), /* Modern Browsers */
         url('/fonts/HelveticaNeue/ttf/HelveticaNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/HelveticaNeue/svg/HelveticaNeue.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face { 
    font-family: HelveticaNeue; 
    font-weight: bold;
    src: url('/fonts/HelveticaNeue/eot/HelveticaNeue-Bold.eot'); /* IE9 Compat Modes */
    src: url('/fonts/HelveticaNeue/eot/HelveticaNeue-Bold.eot') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/HelveticaNeue/woff/HelveticaNeue-Bold.woff') format('woff'), /* Modern Browsers */
         url('/fonts/HelveticaNeue/ttf/HelveticaNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/HelveticaNeue/svg/HelveticaNeue-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face { 
    font-family: HelveticaNeue; 
    font-weight: lighter;
    src: url('/fonts/HelveticaNeue/eot/HelveticaNeue-Light.eot'); /* IE9 Compat Modes */
    src: url('/fonts/HelveticaNeue/eot/HelveticaNeue-Light.eot') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/HelveticaNeue/woff/HelveticaNeue-Light.woff') format('woff'), /* Modern Browsers */
         url('/fonts/HelveticaNeue/ttf/HelveticaNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/HelveticaNeue/svg/HelveticaNeue-Light.svg#svgFontName') format('svg'); /* Legacy iOS */
}

I have placed my fonts on the server in the following location, taking HelveticaNeue.woff as an example:

[...]/test.conscientia.se/public_html/Fonts/HelveticaNeue/woff/HelveticaNeue.woff

and looking at developer tools this is clearly the location it is trying to request, and it’s getting 404 on that.

This code works locally when I run it using Visual Studio, but for some reason it does not work on the server.

What could be the issue? A thousand thanks to anyone who answers!

You need to add the mime types to IIS

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

.

Thanks so much for pointing me in the right direction! What finally worked was this:

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

Leave a Reply