Where do I put my fonts in Rails 4?

Question

I'm having trouble getting fonts working in Rails.

I'm using the Summernote text editor in a Rails app. I have a summernote.css file at vendor/assets/stylesheets/summernote.css . This references font urls like url("font/summernote.eot?ad8d7e2d177d2473aecd9b35d16211fb") .

(I don't know what the id at the end means?)

So I also have font files in vendor/assets/stylesheets/font :

• vendor/assets/stylesheets/font/summernote.eot
• vendor/assets/stylesheets/font/summernote.ttf
• vendor/assets/stylesheets/font/summernote.woff

This actually works fine when I'm developing locally. However, once I deploy to Heroku, the fonts no longer show up.

From browsing around, it looks like I should be putting the fonts under app/assets/fonts instead. But I can't get it to work. I've tried putting them at:

• app/assets/fonts/summernote.woff
• app/assets/fonts/font/summernote.woff

But these don't work and I still get 404 not found errors for the font files on Heroku.

Where am I supposed to be putting the font files?

FWIW, I'm also using Bootstrap SCSS files located at vendor/assets/stylesheets/bootstrap/bootstrap.min.scss , which refer to src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) , and the fonts are located at app/assets/fonts/glyphicons-halflings-regular.eot . These have the opposite problem: they work fine on Heroku, but I get 404 errors when developing locally.

Answer 1

Your research is sending you to the right track. You can put the files in app/assets/fonts folder or vendor\\assets\\fonts folder. In order to utilize them, you will need to need rename your CSS file to have .scss extension and then use sass-rails helpers to point to the fonts.

For example:

src: url(font-path('summernote.eot'));

Here font-path is a helper provided by sass-rails . It will expand into the correct location of the font file. That long string of characters that you see at the end of the paths is fingerprint that sprockets generates for each file to keep track of the versions.

You will also need to add fonts to precompile path. Add following line in config/initializers/assets.rb file:

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf|otf|woff2)\z/

Read all about Asset Pipeline at http://guides.rubyonrails.org/asset_pipeline.html . Read section 2.3.2 CSS and Sass specifically to know more about sass-rails helpers.

Answer 2

Rails Asset Pipeline

Behavior in Production

When you put your fonts into the asset pipeline, Rails will automatically add a cache fingerprint to them in production mode .

This means that your assets are no longer .../font/summernote.eot but rather something like .../font/summernote-abc123def345.eot (where "abc123def345" is a random hex value).

If your stylesheet tries to reference the font file without the fingerprint, it will not be found. It works in development mode because the fingerprint isn't there, so the filename is as expected.

Referencing a fingerprinted asset

In order to reference the font file in the CSS with the fingerprint, you'll need to use one of the the asset pipeline's asset helpers such as font-url or asset-path .

Asset Helpers

For instance, try changing the CSS reference like so,

// in vendor/assets/stylesheets/summernote.css.scss
font-url("font/summernote.eot?ad8d7e2d177d2473aecd9b35d16211fb")

Load Paths

Be sure that the fonts are included in the asset load path

# in config/initializers/assets.rb
Rails.application.config.assets.paths << "vendor/assets/stylesheets/font/"

Answer 3

I had similar problem. What worked for me is this:

• Copied summernote fonts to app/assets/fonts directory

• Added following snippet to application.css.scss

@font-face{
font-family:"summernote";
src:url(font-path("summernote.eot"));
src:url(font-path("summernote.eot?#iefix")) format("embedded-opentype"), url(font-path("summernote.woff")) format("woff"), url(font-path("summernote.ttf")) format("truetype");
font-style:normal;
font-weight:normal;}

I thought this might help someone.

Answer 4

I would take a look at this link on the asset pipeline to fully understand how it works with rails. http://guides.rubyonrails.org/asset_pipeline.html

That will help you with the best place to put it. My opinion is i would put them in assets/fonts then pepare my assests for production. In that link it is under 4.2 rake assets:precompile

Related stack post has a great answer that explains it very simply Using fonts with Rails asset pipeline