HTML lädt keine vollständige benutzerdefinierte Schriftart

Question

Ich habe an meine Localhost-Seitenstile eine benutzerdefinierte Schriftart mit @font-face angefügt. Ich möchte spezielle Schriftart verwenden, es ist wie arabischer Stil, es heißt "Arab Dances".

Ich habe richtige Schriftart und befestigt in der Art der Seite hochgeladen:

<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> 

Schließlich kann ich einen Unterschied sehen, dass eine andere Schriftart verwendet wird, aber es ist nicht " voll geladene "Schrift. Es zeigt nicht den ursprünglichen Stil der Schriftart. Gibt es etwas, das ich hinzufügen muss, damit es den ursprünglichen "arabischen Stil", nicht arabischen Schriftart zeigen kann. Ich verwende die neueste Version von Google Chrome und das angehängte Woff2-, Woff- und TrueType-Format.

Answer 1

Das Problem ist, dass die Links zu DropBox Seiten verweisen (*.html Seiten, nicht *.ttf oder *.woff2 oder *.woff-Dateien), nicht unbedingt die Font-Dateien. Daher werden die Schriftarten nicht tatsächlich geladen. Laden Sie die Schriftartdateien stattdessen auf Ihren Server herunter, und verweisen Sie sie mithilfe relativer Pfade.

das heißt, die Schriftart-Dateien in das gleiche Verzeichnis wie die HTML-Datei herunterladen, und dann anstelle dieses @font-face Code verwenden:

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