HTMLはフルカスタムフォントをロードしません

Question

ローカルホストのページスタイルにカスタムフォントを添付しました。@font-faceです。 私はアラビア語のような特殊なフォントを使用したい、それは "アラブダンス"と呼ばれています。

私は右のフォントをアップロードし、ページのスタイルで付属している：

<style> 
@font-face { 
    font-family: 'ShekuFont'; 
    url('https://www.dropbox.com/s/nwefiy37mw1y2or/arabdances-webfont.woff2?dl=0') format('woff2'), 
    url('https://www.dropbox.com/s/ukkeetvypapov3j/arabdances-webfont.woff?dl=0') format('woff'), 
    url('https://www.dropbox.com/s/5j8621m4sf73n75/ArabDances.ttf?dl=0') format('truetype'); 
} 
.big-title { 
    color: #fff; 
    font-family: ShekuFont; 
    font-size: 5em; 
    font-weight: 900; 
    text-shadow: 1px 1px 2px rgba(50, 50, 50, 0.59); 
    text-transform: uppercase; 
} 
</style> 

HTML：

<h1 class='big-title'>Making Test</h1> 

は、すべての後、私は別のフォントが使用されているいくつかの違いを見ることができますが、それはありません」フルロード "フォント。それは元のスタイルのフォントを表示していません。追加する必要があるものがあるので、アラビア語のフォントではなくオリジナルの「アラビア語のスタイル」を表示できます。 Google Chromeの最新バージョンと添付のwoff2、woff、truetype形式を使用しています。

Answer 1

問題は、実際のフォントファイルではなく、リンクがDropboxページ（*.htmlページ、*.ttfまたは*.woff2または*.woffファイルではない）を指していることです。したがって、フォントは実際には読み込まれません。代わりに、フォントファイルをサーバーにダウンロードし、相対パスを使用してフォントファイルを参照してください。

すなわち、HTMLファイルと同じディレクトリにフォントファイルをダウンロードして、代わりにこの@font-faceのコードを使用します。

@font-face { 
    font-family: 'ShekuFont'; 
    url('arabdances-webfont.woff2') format('woff2'), 
    url('arabdances-webfont.woff') format('woff'), 
    url('ArabDances.ttf') format('truetype'); 
}