Using fonts with Rails asset pipeline

Using Fonts with Rails Asset Pipeline

Are you having trouble using fonts in your Rails application? Can't seem to get the font files to be found by the asset pipeline? Don't worry, we've got you covered! In this blog post, we'll address common issues when using fonts with Rails asset pipeline and provide easy solutions to help you get your fonts up and running. Stay tuned!

The Problem

One common issue users face when using fonts with Rails asset pipeline is that the font files are not being found and resulting in a 404 error. Let's take a look at an example scenario provided by Neil:

<p>I have some fonts being configured in my Scss file like so:</p>

<pre><code>@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}
</code></pre>

<p>The actual font file are stored in /app/assets/fonts/</p>

<p>I have added <code>config.assets.paths &lt;&lt; Rails.root.join("app", "assets", "fonts")</code> to my application.rb file</p>

<p>and the compile CSS source is as follows:</p>

<pre><code>@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}
</code></pre>

<blockquote>
  <p>Started GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100
  Served asset /icoMoon.ttf - 404 Not Found (13ms)</p>
</blockquote>

<p>Why isn't the asset pipeline flattening the font files down into just /assets?</p>

<p>Any ideas people?</p>

<p>Kind regards,
Neil</p>

Neil's trying to configure his font in the SCSS file, but when he runs the app, the font files are not being found in the /assets folder. He's added the font path to config/assets.paths and even checked the Rails console for assets paths, but the font files are still not being located by the asset pipeline.

The Solution

To fix this issue, we need to ensure that the font files are properly included in the asset precompile list and that the correct font paths are set in our application configuration. Here's what we can do:

1. Open up your Rails application's config/application.rb file.

2. Find the line that says config.assets.precompile and make sure that the font file extensions (e.g., .svg, .eot, .woff, .ttf) are included. If they are missing, add them to the list. Your config/application.rb should look something like this:

config.assets.precompile += %w( .svg .eot .woff .ttf )

1. Now, let's add the font path to the asset paths configuration. In the same config/application.rb file, add the following line:

config.assets.paths << Rails.root.join("app", "assets", "fonts")

1. After making these changes, restart your Rails server (rails server) and try accessing your app again. The font files should now be found and served properly.

Take it to the next level! Engage with us:

We hope this guide has been helpful in fixing the font file not found issue with Rails asset pipeline. If you have any further questions or need assistance with other tech-related issues, feel free to drop a comment below.

Let's keep the conversation going! Share your experience with fonts in Rails asset pipeline or let us know if you have any other cool solutions to common tech problems. We'd love to hear from you!

Happy coding! 🚀💻