这里有一个转折:

你应该把所有的字体放在app/assets/fonts/中，因为它们在默认情况下会在登台和生产中被预编译——当推送到heroku时，它们会被预编译。 默认情况下，放置在vendor/assets中的字体文件不会在登台或生产时预编译-它们将在heroku上失败。源!

- @plapier，以为机器人/波旁威士忌

我坚信把厂商字体放到厂商/资产/字体中 这比把它们放到app/assets/字体中更有意义。与 这两行额外的配置对我来说工作得很好 Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

- @jhilden, thoughtbot/波旁威士忌

我还在rails 4.0.0上测试了它。实际上，最后一行已经足够从供应商文件夹安全预编译字体了。花了几个小时才弄明白。希望它能帮助到某人。

我使用Rails 4.2，并不能得到footable图标显示。显示的是小方框，而不是我所期望的折叠行上的(+)和小排序箭头。在学习了这里的信息之后，我对代码做了一个简单的更改:删除css中的字体目录。也就是说，像这样更改所有的css条目:

src:url('fonts/footable.eot');

看起来像这样:

src:url('footable.eot');

它工作。我认为Rails 4.2已经假定了字体目录，所以在css代码中再次指定它会使字体文件找不到。希望这能有所帮助。

这里是一个repo演示了在Heroku上使用Rails 5.2提供自定义字体。它进一步优化服务字体，根据https://www.webpagetest.org/尽可能快

https://github.com/nzoschke/edgecors

首先，我从上面的答案中挑选了一些。对于Rails 5.2+，您不需要额外的资产管道配置。

资产管道和SCSS

将字体放置在app/assets/fonts中 将@font-face声明放在一个scss文件中，并使用font-url帮助器

从app /资产/样式表/ welcome.scss:

@font-face {
  font-family: 'Inconsolata';
  src: font-url('Inconsolata-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

从CDN与CORS服务

我正在使用CloudFront，添加了Heroku Edge插件。

首先在生产端配置CDN前缀和默认的Cache-Control头。rb:

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_host = ENV["EDGE_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

如果您尝试从herokuapp.com URL访问CDN URL的字体，您将在浏览器中得到一个CORS错误:

从“https://edgecors.herokuapp.com”访问“https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf”的字体已被CORS政策阻止: 被请求的资源上没有'Access-Control-Allow-Origin'标头。edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net::ERR_FAILED

因此，配置CORS以允许从Heroku到CDN URL访问字体:

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

服务gzip字体资产

资产管道构建一个.ttf.gz文件，但不为它服务。这个monkey补丁将资产管道gzip白名单更改为黑名单:

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

最终的结果是app/assets/fonts中的自定义字体文件，这些文件由CloudFront长期缓存提供。

下面是我在资产管道中使用字体的方法:

1)把你所有的字体文件放在app/assets/fonts/下，实际上你不限制把它放在fonts文件夹名称下。你可以放任何你喜欢的子文件夹名。例如app/assets/abc或app/assets/anotherfonts。但我强烈建议你把它放在app/assets/fonts/文件夹结构更好。

2)从你的sass文件中，使用sass helper font-path来请求你的字体资产，就像这样

@font-face {
    font-family: 'FontAwesome';
    src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
    src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
         url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
         url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
         url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
         url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3)运行bundle exec rake assets:从本地机器预编译并查看application.css的结果。你应该会看到这样的东西:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

如果你想了解更多资产管道是如何工作的，你可以访问下面的简单指南: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

只需要把你的字体放在app/assets/fonts文件夹中，并在app开始使用application.rb中编写代码时设置自动加载路径

config.assets.paths << Rails.root。加入("app"， "assets"， "fonts") 而且

然后在css中使用以下代码。

@font面{

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;

}

试一试。

谢谢

如果你不想跟踪字体的移动:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}