Search code examples
ruby-on-railsrubyherokutruetype

Serving Font Files from a Heroku Cedar Rails App

I'm working on a webpage for my wedding and I am trying to customize the font on the heading. When I try to serve a .tff file from my /public/fonts folder, I get the following error in Chrome:

Resource interpreted as Other but transferred with MIME type undefined.

The stylesheet uses the following lines:

@font-face {
    font-family: elegant;
    src: url(/fonts/adine-kirnberg-script.ttf);
}
header {
    font-size: 64px;
    font-family: elegant;
}

I can download the font file at /fonts/adine-kirnberg-script.ttf so I know it's not that the file isn't being served, but apparently the MIME type is causing the bug.

I'm going crazy trying to figure out how to solve the problem, any help would be appreciated!

Solution

  • Try serving the font with the application/x-font-ttf or font/ttf mime type.

    In one of your app's initializers configure the mime type like this:

    Mime::Type.register "application/x-font-ttf", :ttf