Font doesn't load in production with heroku / ruby on rails

Question

my custom font is loaded in development but not on heroku, could you help me figure it out please ?

@font-face {
  font-family: "Syne";
  src: asset-url('/assets/Syne-Regular.otf') format("truetype");
}
@font-face {
  font-family: "Syne-Title";
  src: asset-url('/assets/Syne-Extra.otf') format("truetype");
}


$body-font: "Syne";
$headers-font: "Syne-Title";

Answer 1

Please make fonts folder under assets folder and move fonts files to that folder. And add fonts folder to assets path.

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

And just define fonts using `font-url.

@font-face {
  font-family: "Syne";
  src: font-url('Syne-Regular.otf') format("truetype");
}
@font-face {
  font-family: "Syne-Title";
  src: font-url('Syne-Extra.otf') format("truetype");
}


$body-font: "Syne";
$headers-font: "Syne-Title";