当前位置: 动力学知识库 > 问答 > 编程问答 >

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?

网友答案:

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!

分享给朋友:
您可能感兴趣的文章:
随机阅读: