这里是一个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长期缓存提供。

只需要把你的字体放在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;

}

试一试。

谢谢

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

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

看起来像这样:

src:url('footable.eot');

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

如果你有一个叫做scaffold。css的文件。Scss，那么就有可能覆盖您在其他文件中所做的所有自定义操作。我把那个文件注释掉了，突然之间一切都正常了。如果那个文件里没有什么重要的东西，你还不如把它删掉!

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

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

我最近将Rails 3应用程序升级到Rails 4时也遇到了类似的问题。我的字体在Rails 4+中不能正常工作，我们只允许将字体保存在app/assets/fonts目录下。但是我的Rails 3应用程序有一个不同的字体组织。所以我必须配置应用程序，使它仍然与Rails 4+有我的字体在不同的地方，而不是app/assets/fonts。我已经尝试了几个解决方案，但在我发现非愚蠢的消化资产宝石后，它只是让它变得如此简单。

通过在Gemfile中添加以下代码行来添加这个gem:

gem 'non-stupid-digest-assets'

然后运行:

bundle install

最后在config/initializers/non_digest_assets中添加以下一行。rb文件:

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

就是这样。这很好地解决了我的问题。希望这对遇到类似问题的人有所帮助。