How to use fonts in Rails 4

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;
}