65

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
Bitswazsky
  • 4,242
  • 3
  • 29
  • 58
SnareChops
  • 13,175
  • 9
  • 69
  • 91
  • 1
    Just wanted to note that you cannot use the "font" property for this to work. You must specify: `font-family: 'HDVPeace';` in your application.css.less file. Wasted a good 20 minutes trying to figure out what was wrong so hopefully this will save someone time and effort :) – TwoByteHero Aug 11 '14 at 23:28
  • Possible duplicate of [Using fonts with Rails asset pipeline](http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline) – Besi Oct 06 '15 at 17:52
  • If you want to manually deal with fonts, here is a solution I built for my Rails application: http://stackoverflow.com/a/37650261/3802981 – Châu Hồng Lĩnh Jun 06 '16 at 07:41
  • Here is an excellent How-To for setting up the asset path for fonts using Rails 4 and Bourbon: http://github.com/thoughtbot/bourbon/issues/239#issuecomment-26167073 (no need to edit anything in application.rb, production.rb or staging.rb.) – gl03 Aug 27 '14 at 12:28
  • I wrote a generic way to diagnose and solve this problem at http://stackoverflow.com/a/40898227/1197775. – sites Nov 30 '16 at 21:12

8 Answers8

60

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.

Dave Powers
  • 2,051
  • 2
  • 30
  • 34
Parker Selbert
  • 1,546
  • 13
  • 13
  • 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? – SnareChops Aug 18 '13 at 15:00
  • What is the structure of your `app/assets` folder? Can you list `app/assets/fonts`? – Parker Selbert Aug 18 '13 at 15:35
  • Updated with folder structure on the OP – SnareChops Aug 18 '13 at 17:05
  • 9
    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. – Parker Selbert Aug 19 '13 at 15:14
  • 2
    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... – SnareChops Aug 20 '13 at 01:22
  • 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. – Parker Selbert Aug 20 '13 at 11:56
  • 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? – SnareChops Aug 20 '13 at 16:19
  • 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. – Parker Selbert Aug 20 '13 at 16:46
  • 8
    `font-url` is supposed to add the `/assets` prefix by itself, so there should be no need to specify it. – Matijs van Zuijlen Sep 03 '13 at 12:58
  • 5
    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 http://stackoverflow.com/questions/17536023/rake-assetsprecompilenodigest-in-rails-4 for more details – Eric Caron Dec 30 '13 at 20:18
  • 2
    If I use `asset-url` everything works. `font-url` wasn't working for me. – aledalgrande Feb 01 '14 at 17:33
  • 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. – danielricecodes Jun 09 '14 at 19:32
  • 6
    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. – Space Sep 09 '14 at 15:10
  • It took me like one hour until I restart my server. – Vibol Apr 24 '15 at 09:34
  • 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')` – Tiffany Sep 03 '17 at 00:09
  • 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. – Alfredo Gallegos Jan 31 '18 at 22:35
52

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.

Nalin
  • 521
  • 4
  • 3
  • 1
    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')` – TJ Biddle Apr 18 '16 at 03:10
11

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;
}
rebagliatte
  • 2,110
  • 1
  • 20
  • 25
  • 1
    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'))` – dimitarvp Apr 25 '17 at 20:17
9

Restart 'rails server' after creating the app/assets/fonts directory

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/

zwippie
  • 15,050
  • 3
  • 39
  • 54
Ricky
  • 753
  • 1
  • 6
  • 7
3

In case if you guys have problem using fonts in Rails 5 you just need to edit app/assets/config/manifest.js

And then insert this //= link_tree ../fonts

How to use:

@font-face { font-family: 'FontAwesome'; src: url('fontawesome-webfont.eot?v=4.6.3'); src: url('fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('fontawesome-webfont.woff?v=4.6.3') format('woff'), url('fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

And also dont forget to restart your server.

david.juntak
  • 61
  • 5
2

Sometimes fonts are not detected from the assets/fonts directory.

If security is not an issue, we can put the fonts directory into the public folder. They will then be available at a public/ level.

Phix
  • 9,364
  • 4
  • 35
  • 62
tjs7706
  • 85
  • 4
1

Forget about changing anything in Rails 4 in your application.rb. Just add /assets/ prefix like @Parker Selbert said and the following will work: 

@font-face {
  font-family: 'custom-font-name';
  src: font-url('/assets/_folder_/fontX-webfont.eot');
  src: font-url('/assets/_folder_/fontX-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/_folder_/fontX-webfont.woff') format('woff'),
       font-url('/assets/_folder_/fontX-webfont.ttf') format('truetype'),
       font-url('/assets/_folder_/fontX-webfont.svg#sociconregular') format('svg');
  font-weight: normal;
  font-style: normal;

}
luigi7up
  • 5,779
  • 2
  • 48
  • 58
  • 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" http://guides.rubyonrails.org/asset_pipeline.html#asset-organization – aenw Dec 04 '14 at 09:11