@ font-faceがff、chrome、safari（Macの場合）で動作しない

Question

@ font-faceはMacのブラウザでは動作しません。私はこれが関連するコードだと信じていますが、私は他の部分を貼り付けることができます。 Macはこれを別の方法で扱いますか？

@font-face { 
font-family: BebasNeue; 
src: url('fonts/BebasNeue.otf'); 
} 

/*----HEADING----*/ 
.heading { 
font-family: BebasNeue, sans-serif; 
} 

.word1{ 
font-size: 100px; 
position: absolute; 
top: 35px; 
} 

.word2{ 
font-size: 79px; 
color: 6a6964; 
position: absolute; 
top: 54px; 
left: 165px; 
} 

.word3{ 
font-size: 106px; 
position: absolute; 
top: 104px; 
} 

.tagline { 
font-family: BebasNeue, sans-serif; 
font-size: 35px; 
color: c1bcb6; 
position: absolute; 
top: 205px; 
left: 13px; 
} 

.tagWord2{ 
color: 6a6964; 
} 

.copyright { 
font-family: arial, sans-serif; 
color: 6a6964; 
font-size: 13px; 
font-variant: small-caps; 
position: absolute; 
top: 245px; 
left: 215px; 
} 

PS最近私は肩の手術を受けていましたので、私はキーボードを片手でタップしている間、忍耐力に感謝します。ありがとう！

***エラーが発生したため、フォントの場所に間違いがあり、ローカルマシンには既にフォントが読み込まれています。私は自分の質問に答えるか、または削除するのに十分な評判を持っていないので、最初の人はそれを答えとして私は正しいとマークします。

Answer 1

どこからBebasNeue.otfフォントファイルを入手しましたか？それは本当にotfフォントではないでしょうか？

フォントフェイスをブラウザ間で完全に互換性を持たせるには、いくつかのフォントソースを異なるフォーマットで提供する必要があります。ここには良い出発点があります：http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax