Как загрузить шрифт пользовательского шрифта в файлы S CSS?

Question

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

@font-face {
  font-family: 'proximaNova-bold';
  src: asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.eot');
  src: asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
       asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.woff') format('woff'),
       asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.ttf') format('truetype'),
       asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

Вот как выглядит мое дерево файлов:

ПРИМЕЧАНИЕ: я использую asset_url, потому что он будет развернут в Heroku (и я считаю, что URL-адреса отличаются в производственном и в разработке)

И вот сообщение об ошибке, которое я получаю:

ActionController::RoutingError (No route matches [GET] "/ProximaNova-`Bold.ttf"):`

Answer 1

переместите файлы шрифтов из подпапки fonts / proxima_nova_bold в шрифты (app / assets / fonts) и вот как вы их импортируете

@font-face {
    font-family: 'ProximaNova-Bold';
    src: asset-url('ProximaNova-Bold.eot');
    src: asset-url('ProximaNova-Bold.eot') format('embedded-opentype'),
         asset-url('ProximaNova-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}