@font-faceでwebフォントが読み込まれない。

Question

前提

web開発初心者です。
cloud9を使用しています。

実現したいこと

・＠font-faceを使用してwebフォントを使用したい。

発生している問題・エラーメッセージ

webフォントが読み込まれたり、読み込まれなかったりする。
現在は読み込まれていない。

該当のソースコード

@font-face {
  font-family: "Shinonome14";
  src: url("../fonts/JF-Dot-Shinonome14.ttf") format("truetype"),
       url("../fonts/JFshinonomedot14.woff") format("woff");
}

@font-face {
  font-family: "Kaiso";
  src: url("../fonts/kaiso_after.ttf") format("truetype"),
       url("../fonts/kaiso_after.woff") format("woff");
}


h1 {
  font-family: "Shinonome14";
  color: red;
}
p {
  font-family: "Kaiso";
  color: green;
}

h2 {
  font-family: "Kaiso";
  color: blue;
}

<h1>これはテストコメントです。</h1>
<p>これはテストコメントです。</p>
<h2>これはテストコメントです。</h2>

試したこと

ファイルが重すぎるのかと思い、サブセット化をしましたが、特に変わりませんでした。
ファイルの種類がよくないのかと考え、woffファイルに変換して試してみてもダメでした。

補足情報（FW/ツールのバージョンなど）

font-family: "Kaiso";は読み込まれたり、読み込まれなかったりしますが、"Shinonome14"は一度も読み込まれません。
以下、ツリー構成と現在の状態です。

・ツリー構成

現在の状態

Answer 1

P.S.
質問時のコードの場合、なぜwebフォントが読み込まれないのか、気になって夜も眠れないので、教えていただけると嬉しいです。

アプリ実行時、
①フォントファイルのパスが../fonts/では無い
②ファイル名にフィンガープリントがついている
（例：JF-Dot-Shinonome14-reiu74354hk24378.ttf　という感じで末尾に知らない文字列がくっついてる）
のいずれかになっているのではないでしょうか？
アプリを実行して、ブラウザの開発者ツールで確認できます。（Chromeだったら開発者ツールのSourceタブとか）

実行環境がproduction環境の場合、Sprocketsミドルウェアが上記のような処理を行います。
フォントが読み込まれたときはdevelopment環境で、読み込まれなかったときはproduction環境で実行していた・・・
ということが考えられますが、いかがでしょうか？

asset-url()を使うと、上記処理に対応した良い感じのURLに加工処理してくれるので、
問題なくフォントが読み込まれたということだと思います

Answer 2

この場合のwebフォントが読み込まれない理由は分かりませんが、以下の異なる方法で表示させることができました。

@font-face {
  font-family: 'Shinonome14';
  src: asset-url('JF-Dot-Shinonome14.ttf');
}

asset-urlはsass-railsというgemをインストールすることで使用できるヘルパーメソッドらしいです。
assetファイルへのパスを取得するRailsのasset_pathと似てますね。。。

P.S.
質問時のコードの場合、なぜwebフォントが読み込まれないのか、気になって夜も眠れないので、教えていただけると嬉しいです。