@ font-face cssカスタムフォントを追加する

Question

私はワードプレステーマを持っており、カスタムフォントを追加したいと思います。フォントファイルを置くテーマファイル内に "fonts"フォルダを追加しました。

は今の私のCSSは次のようになります。

@font-face { 
font-family: Brandon; 
src: url('/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf'); 
font-weight: normal; 
} 
h1 { 
font-family: Brandon; 
} 

はしかし、これは動作するようには思えないし、私はその理由を理解していません。

Answer 1

私はあなたがパスがCSSファイルから正しいことを確認することをお勧めします。フォントの読み込みに失敗した場合に備えてフォールバックを設定することも良いでしょう。お使いのデバイスでサポートされているフォントファイルの種類が不足している可能性もあります。

Answer 2

srcパスが間違っているために動作しません。 "/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf"

ローカルでフォントファイルをダウンロードして、次のように使用することができます：

@font-face { 
font-family: 'Montserrat-Regular'; 
src: url('../fonts/montserrat-regular-webfont.eot'); 
src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/montserrat-regular-webfont.woff2') format('woff2'), 
    url('../fonts/montserrat-regular-webfont.woff') format('woff'), 
    url('../fonts/montserrat-regular-webfont.ttf') format('truetype'); 

}