Пользовательский шрифт (через Asset Pipeline) не отображается в Heroku с Rails 5.2

Question

Я пытаюсь заставить шрифт списка воспроизведения работать в моем приложении Rails. Он появляется на локальном хосте, но не на Heroku.

Я добавил папку fonts в свою папку assets, поместил в нее файлы PlaylistCaps.otf и PlaylistScript.otf и добавил эту строку в мой config/application.rb:

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

У меня есть это в моем application.scss файле:

@font-face {
  font-family: "PlaylistScript";
  src: url(/assets/fonts/PlaylistScript.otf) format("opentype");
}

@font-face {
  font-family: "PlaylistCaps";
  src: url(/assets/fonts/PlaylistCaps.otf) format("opentype");
}

Я также пытался установить исходные файлы на S3 и связать их с src: url(), но безрезультатно ...

Я проверил, чтобы Heroku предварительно скомпилировал мои ресурсы при развертывании (я не делаю это отдельно).

Может кто-нибудь помочь мне понять это? Мой сайт в настоящее время показывает этот ужасный шаблонный курсив. Я ознакомился со многими сообщениями SO ( здесь , здесь , здесь ) и некоторыми гистами (например, this ), но не могу найти рабочий раствор.

Живой сайт здесь , если вы хотите побродить.

Обновление

Я добавил опцию резервного копирования шрифтов Google в свой scss, чтобы избежать скорописи по умолчанию. Он по-прежнему не показывает правильный шрифт, но, по крайней мере, не отвлекает вас от уродства при загрузке страницы:

$font-script: 'PlaylistScript', 'Arizonia', cursive;

Answer 1

Вы должны использовать asset-path в ваших sass-файлах Rails.

Так что вместо:

src: url(/assets/fonts/PlaylistCaps.otf) format("opentype");

Do:

src: asset-path(PlaylistCaps) format("opentype");

Здесь есть некоторая документация: https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

Когда вы делаете это, должны генерироваться правильные пути активов. Например, вы получите «отпечатанные» URL-адреса, например: https://www.thestaysanemom.com/assets/PlaylistScript-4a2ebf308b737499dcd1eef2a5cb0edf756089ea4eca0b811034ab41c4dbca8f.otf, который, если вы видите, теперь будет загружать этот шрифт.

Answer 2

Я никогда не использовал автономные шрифты раньше, но я попробовал это только сейчас, и это работает:

Удалите путь к папке и используйте URL-адрес актива вместо URL:

@font-face {
  font-family: 'PlaylistScript';
  src: asset-url('PlaylistScript.otf');
}

@font-face {
  font-family: 'PlaylistCaps';
  src: asset-url('PlaylistCaps.otf');
}

Надеюсь, это поможет.