After precompiling assets for production, I get “File to import not found or unreadable: fonts.” error in development

Question

I have a Rails 4 app with a fonts directory in the assets folder, along with the usual stuff. I precompiled my assets for production, but now when I try to work locally I get:

Sass::SyntaxError
File to import not found or unreadable: fonts.

The whole error looks like this:

Haven't had much luck finding an answer. Thanks.

EDIT

I tried moving my assets into the assets block in the gemfile but that did nothing. Before that they weren't in any block, didn't work there either.

application.rb

require File.expand_path('../boot', __FILE__)

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Atbp
  class Application < Rails::Application
    config.assets.paths << Rails.root.join("app", "assets", "fonts")
  end
end

Answer 1

In your config/application.rb , look at your config.assets.paths line. It should include 'fonts'.

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

Edit

After that, your fonts should be available with the font-path helper:

@font-face
  font-family: 'FontName'
  src: url(font-path('font-name.eot'))
  ...

Answer 2

Turns out I was trying to @import "fonts" , which is a directory and not a file. So as @nickcoxdotme suggested, I added

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

to application.rb

In addition, I was calling my fonts in the scss file like so:

@font-face {
  font-family: 'hamilton19';
  src: asset_url('hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.eot');
  src: asset_url('hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.eot?#iefix') format('embedded-opentype'),
    asset_url(hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.woff') format('woff'),
    asset_url('hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.ttf') format('truetype'),
    asset_url('hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.svg#MonoSocialIconsFont') format('svg');
  src: asset_url('hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

When I needed to be calling them with font_url and '/assets/ in the path.

@font-face {
  font-family: 'hamilton19';
  src: font_url('/assets/hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.eot');
  src: font_url('/assets/hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.eot?#iefix') format('embedded-opentype'),
     font_url('/assets/hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.woff') format('woff'),
     font_url('/assets/hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.ttf') format('truetype'),
     font_url('/assets/hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.svg#MonoSocialIconsFont') format('svg');
  src: font_url('/assets/hamilton_wood_type_foundry_-_hwtunitgothic-719-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}