title: How to use fonts in Rails 4
body: <p>I have a Rails 4 application and I am trying to use a custom font.</p>
  <p>I have followed many tutorials on this and somehow it's just not working for my application.</p>
  <p>I am using <code>application.css.less</code> and have the following declaration:</p>
  <pre><code>@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');
  }
  </code></pre>
  <p><em>Note: I have tried using</em> <code>url()</code> <em>instead of</em> <code>font-url()</code> <em>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</em> <code>assets</code> <em>folder, or anywhere</em></p>
  <p>in my <code>config/application.rb</code> I have:</p>
  <pre><code>config.assets.paths &lt;&lt; Rails.root.join('app', 'assets', 'fonts')
  </code></pre>
  <p>And in both my <code>config/environments/development.rb</code> and <code>config/environments/production.rb</code> I have:</p>
  <pre><code>config.assets.paths &lt;&lt; Rails.root.join('app', 'assets', 'fonts')
  config.assets.precompile += %w( .svg .eot .woff .ttf)
  </code></pre>
  <p>My font files are located at <code>app/assets/fonts</code> and are not contained in a folder below that...</p>
  <p>What am I missing?</p>
  <p><strong>UPDATE:</strong></p>
  <p>folder structure</p>
  <pre><code>app
  └── assets
      └── fonts
          ├── HDV_Peace.eot
          ├── HDV_Peace.svg
          ├── HDV_Peace.ttf
          └── HDV_Peace.woff
  </code></pre>