CODEWITHSUNDEEP
ruby-on-railsfontsasset-pipeline
Andrew
Andrew

Reputation: 238747

Rails asset pipeline: Why do my custom fonts work in development but not production?

I'm using some custom fonts in my Rails 4.1 application. They are located here:

app/assets/fonts/MyCustomFont.ttf

I am referencing them in my stylesheet (SASS):

@font-face
  font-family: "MyCustomFont"
  src: url("MyCustomFont.ttf") format('truetype')

h1
  color: #fff
  font-family: "MyCustomFont"

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) http://example.com/assets/MyCustomFont.ttf

When I type in the URL of the font using the filename listed in the log:

http://example.com/assets/MyCustomFont-18108066511bb5b3ddfd0454b738e8d5.ttf

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?

Upvotes: 1

Views: 604

Answers (1)

Richard Peck
Richard Peck

Reputation: 76774

Precompilation

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 asset_url helper:

#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!

Upvotes: 3

Related Questions