How to use fonts in Rails 4

Question

I have a Rails 4 application and I am trying to use a custom font.

I have followed many tutorials on this and somehow it's just not working for my application.

I am using application.css.less and have the following declaration:

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');
}

Note: I have tried using url() instead of font-url() also. The former generates 404 errors on the console, where the latter just doesn't seem to do anything at all. In the chrome dev tools under resources, the font files are not appearing under the assets folder, or anywhere

in my config/application.rb I have:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

And in both my config/environments/development.rb and config/environments/production.rb I have:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

My font files are located at app/assets/fonts and are not contained in a folder below that...

What am I missing?

UPDATE:

folder structure

app
└── assets
    └── fonts
        ├── HDV_Peace.eot
        ├── HDV_Peace.svg
        ├── HDV_Peace.ttf
        └── HDV_Peace.woff

Solution 1

Your @font-face declaration is very close, you are just missing the /assets prefix within the url declaration.

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');
}

Anything that has been added to assets.paths is available directly under the /assets path in both development and production. You only need the asset path modification line within application.rb, doing it again in development.rb and production.rb is just redundant.

Additionally, all of the font formats are essentially binary. There is no need to pre-compile them, so you can safely remove the assets.precompile addition.

Solution 2

In Rails 4, there is a helper to set the path for the fonts.

If you have the font in /assets/fonts or vendor/assets/fonts, Rails 4 will find them! To take advantage of this, in the Bootstrap CSS file change the @font_face call to

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       font-url('glyphicons-halflings-regular.woff') format('woff'), 
       font-url('glyphicons-halflings-regular.ttf') format('truetype'), 
       font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Note that there is no folder specification in front the font files. This is completed by the rails helper.

Solution 3

Please do not hardcode your font directory since the location is dynamic.

Just like there are built-in helpers for images there is are also built-in helpers for fonts: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

Example:

@font-face {
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

Solution 4

This worked for me on a Rails 4.1 app.

1. Add the fonts under `app/assets/fonts`
2. Call them from a `.css.scss` file as follows:

@font-face {
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Solution 5

I found this article to solve all of my problems.

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/

View more solutions

Comments

[SnareChops]

That you very much, and this makes sense and I have made the adjustments. However I am still receiving Failed to load resource: the server responded with a status of 404 (Not Found) in the developer console for http://localhost:3000/assets/HDV_Peace.woff and the other files... Why is rails not sending these to the host?

[Parker Selbert]

What is the structure of your app/assets folder? Can you list app/assets/fonts?

[SnareChops]

Updated with folder structure on the OP

[Parker Selbert]

I just reviewed one of the applications I have setup with custom fonts on Rails 4. It looks like adding fonts to paths isn't even necessary. Remove the paths addition, restart, and it should work fine.

[SnareChops]

Tried and restarted server. No change. In the Dev Tools in Chrome under Sources (where it shows all of the assets that the server pushed down to the client) I don't see the font files, or the fonts folder. Also the console is still returning with 404 resource not found errors... Somehow the asset pipeline isn't picking up the files...

[Parker Selbert]

I've added a link to an example app. Almost nothing has been done to the app, aside from the @font-face addition and adding a page resource.

[SnareChops]

Side note: I did notice that in my public/assets folder there are instances of the font files (of course with the MD5 string attached to the end) so it looks like the asset pipeline is pulling them down, but somehow the browser can't find them. (That or those were the files created when I ran the precompiler) I think at this point I would rather just have them statically placed in the public folder, does that work too?

[Parker Selbert]

Yeah, those would have been added when you ran the precompile step. If you prefer you can put the fonts inside of public, just be sure to remove the '/assets' prefix.

[Matijs van Zuijlen]

font-url is supposed to add the /assets prefix by itself, so there should be no need to specify it.

[Eric Caron]

I think the problems are that Rails4 no longer puts a version of the fonts - without a digest - in the asset pipeline. Because of that, you can't trust /assets/HDV_Peace.eot to exist (it was there in Rails3, now only /assets/HDV_Peace-yourdigesthere.eot will exist.) See stackoverflow.com/questions/17536023/… for more details

[aledalgrande]

If I use asset-url everything works. font-url wasn't working for me.

[danielricecodes]

This contradicts information above but in my case I still had to add this config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.otf) to my application.rb file. Once I added the above, rake assets:precompile displayed the font files during compilation and production 404 errors for font requests vanished. I'm on Rails 4.1 with Sprockets 2.11.

[Space]

I found that a new Rails 4 app just needed: font-url('fontfile.eot?'); in the scss file. Needed to restart server for it to work after creating the fonts direction under app/assets though.

[aenw]

Any directory under /assets will be searched with the font-url helper method (and any helper method), so putting '/assets/_folder_' is not needed. The Rails Guide says this: " 2.2.1 Search Paths When a file is referenced from a manifest or a helper, Sprockets searches the three default asset locations for it. The default locations are: the images, javascripts and stylesheets directories under the app/assets folder, but these subdirectories are not special - any path under assets/* will be searched" guides.rubyonrails.org/asset_pipeline.html#asset-organizatio‌​n

[Vibol]

It took me like one hour until I restart my server.

[Tamik Soziev]

font-url and other solutions did not work for me, however font_url (with underscore) did work great.

[TJ Biddle]

Note! For the past, do not include assets/fonts/; assume that's the root! So if you have something in assets/fonts/roboto/robot.eot then it would be font-url('roboto/roboto.eot')

[dimitarvp]

This helped me, thank you. The crucial part was to use both url and font-path one after the other as you did: url(font-path('font-asset-path'))

[Augusto Samamé Barrientos]

font_url was the only thing that really worked for my Rails 5 app

[mohnstrudel]

Both, font_url and font-url worked for me after renaming style.css.erb to style.css.scss.erb. Keep that in mind.

[Tiffany]

On Rails 5.1.3 I tried out what @ParkerSelbert suggested and it worked! * I removed the application.rb config.assets.paths << Rails.root.join('app', 'assets', 'fonts') * I used src: url('Lato.ttf') format('truetype')

[Alfredo Gallegos]

This is one of the things that I dislike about rails. Its opinionated nature makes small details like these obscure to find and basically delegates it to the community to explain. Fortunately this worked out for me.