Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use fonts in Rails 4
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload