如何在Rails应用程序（版本7）中添加自定义字体

Question

在开发模式下，自定义字体（Raleway）存在，但在暂存环境中没有反映。我将我的应用部署到了Heroku。 在application.rb中添加了以下命令。

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

在application.bootstrap.scss中添加了font-family。

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

@font-face {
  font-family: 'raleway-semibold';
  src: font-url('raleway-semibold.ttf') format('truetype');
}

@font-face {
  font-family: 'raleway-medium';
  src: font-url('raleway-Medium.ttf') format('truetype');
}

my_app/app/assets/fonts 目录下提供字体文件。

我使用命令 rails new my_app --javascript esbuild --css bootstrap --database postgresql 创建了我的 Rails 应用程序。 Rails 版本为 7。

- Siva

---

如果可能的话，您能否尝试使用CDN添加自定义字体？ - Deepak Kumar

谢谢@DeepakKumar，我会考虑的，但是能否使用下载的字体呢？ - Siva

是的，这是可能的。你可以尝试将 font-url 更改为 asset_url 吗？ src: asset_url('raleway-Medium.ttf') format('truetype'); - Deepak Kumar

如果不是添加config.assets.paths...而是在app/assets/config/manifest.js中添加//= link_tree ../fonts，似乎也可以工作。我认为这是一种更现代的方式。 - undefined

Answer 1

尝试使用url代替font-url。这对我有效。使用scss和相同的文件夹配置。

@font-face {
  font-family: 'font-name';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-name.ttf") format('truetype');
}

Rails会自动创建自己的字体路径。

/assets/font-name-afb238caf5f2396b697d84a32556090b0851e382692f617c6aeaac79e02971a0.ttf

- Marcin Mąsior

---

另外需要注意的是，Rails中的资产管道现在会在src属性中用单引号或双引号括起字体名称时抛出错误。只需用括号括起来即可正常工作。 - Matteo

当我尝试使用mina进行部署时，出现了以下错误： "SassC::SyntaxError: Error: Invalid CSS after "...32ef36ed15a2e1e": expected expression (e.g. 1px, bold), was '.otf) format("opent' on line 19819:106 of stdin >> 32ef36ed15a2e1e.otf) format("opentype");"我已经将一个字体文件导入到application.scss中。一旦我将"font-url"改为"url"，错误就消失了。谢谢你的帮助！ - Chnikki