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

}

试一试。

谢谢

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

把你的字体文件(woff, woff2, eot, ttf，…)放在/app/assets/fonts目录下。

然后添加以下到您的配置/初始化/资产。rb:

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

在上面的答案中，woff2没有包括在内(为了将来的参考，你可能需要添加其他扩展，只需在这里添加|{font-file-extension})

使用css文件中的字体:

重要的是，你需要将它从stylesheet.css重命名为stylesheet.css.scss(这是为了让font-url在资产预编译后正确地在生产中转换字体的url):

@font-face {
  font-family: 'MyFont'
  src: font-url('myfont.woff') format('woff');
}

body{
  font-family: 'MyFont'
}

然后运行:

rails assets:precompile

在运行资产预编译后，你的字体文件从app/assets/fonts/myfont复制。woff到public/assets/myfont-{SOME_DIGEST_KEY}。woff的位置。现在上面的css在生产中也很像图像资产。

您还可以看到，在预编译资产命令之后创建了一个应用程序-{somedigest}.css，在其中您将看到 现在，我们的font-url('myfont.woff')将被转换为url(/assets/myfont.woff-{SOME_DIGEST_KEY}.woff)，并且摘要与文件移动到的位置匹配。通过这种方式，更新你的字体文件也可以适当地破坏浏览器缓存等。

确保你的nginx也服务于public/assets文件夹以获得更好的性能。这是用rails 5和rails 6在生产中测试的。它也应该工作与rails 4最有可能。

If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders: app/assets/fonts lib/assets/fonts vendor/assets/fonts For Rails versions > 4, you must place your fonts in the app/assets/fonts folder. Note: To place fonts outside of these designated folders, use the following configuration: config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/ For Rails versions > 4.2, it is recommended to add this configuration to config/initializers/assets.rb. However, you can also add it to either config/application.rb , or to config/production.rb Declare your font in your CSS file: @font-face { font-family: 'Icomoon'; src:url('icomoon.eot'); src:url('icomoon.eot?#iefix') format('embedded-opentype'), url('icomoon.svg#icomoon') format('svg'), url('icomoon.woff') format('woff'), url('icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; } Make sure your font is named exactly the same as in the URL portion of the declaration. Capital letters and punctuation marks matter. In this case, the font should have the name icomoon. If you are using Sass or Less with Rails > 3.1.0 (your CSS file has .scss or .less extension), then change the url(...) in the font declaration to font-url(...). Otherwise, your CSS file should have the extension .css.erb, and the font declaration should be url('<%= asset_path(...) %>'). If you are using Rails > 3.2.1, you can use font_path(...) instead of asset_path(...). This helper does exactly the same thing but it's more clear. Finally, use your font in your CSS like you declared it in the font-family part. If it was declared capitalized, you can use it like this: font-family: 'Icomoon';

我最近将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)$/ ]

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

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

}

试一试。

谢谢