asset pipeline - 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

Answer 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.