I'm using some custom fonts in my Rails 4.1 application. They are located here:
I am referencing them in my stylesheet (SASS):
src: url("MyCustomFont.ttf") format('truetype')
In development mode, it correctly renders my font. When I deploy to production, I see the font mentioned in the log:
** Execute assets:precompile
I, [2014-09-12T23:46:40.077333 #12473] INFO -- : Writing /var/www/apps/10121/releases/c655762f076df708896b622c12429c8bf76f21ec/public/assets/MyCustomFont-18108066511bb5b3ddfd0454b738e8d5.ttf
However, when I load the page in my browser it does not render the custom font. The web inspector console shows an error:
Failed to load resource: the server responded with a status of 404 (Not Found)
When I type in the URL of the font using the filename listed in the log:
Then the browser triggers a file download. So it seems like it's just a matter of referencing the file at the wrong location.
How can I solve this problem and what is the correct way to reference a font so that it works in production when the assets are compiled?
Classic issue - it's basically down to the
precompilation process of Rails (how it fingerprints the files etc), and your not calling the
dynamic filepath (which is created as a result of this precompilation process)
You're calling the following:
#app/assets/stylesheets/application.css.sass @font-face font-family: "MyCustomFont" src: url("MyCustomFont.ttf") format('truetype')
This will work in development because
MyCustomFont.ttf will be available in the assets folder. However, when this is pushed to production (and hence has the fingerprint appended, and moved to the
public/assets folder), your static reference won't work
Instead, you'll be best using the
#app/assets/stylesheets/application.css.sass @font-face font-family: "MyCustomFont" src: asset_url("MyCustomFont.ttf") format('truetype')
This will reference the dynamic file - not the static one - meaning the precompilation process should work!