How to use fonts in Rails 4
asset-pipeline, fonts, ruby-on-rails-4
Solution
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.
Problem
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 ```