如何在 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目录中找到。

我使用命令创建了 Railsrails new my_app --javascript esbuild --css bootstrap --database postgresql

导轨版本 7

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