user3537210 user3537210 - 4 months ago 19
HTML Question

HTML won't load full custom font

I have attached custom font on my localhost page styles with

@font-face
.
I want to use special font, it's like Arabic style, it's called "Arab Dances".

I have uploaded right font and attached in style of page:

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


After all, I can see some difference that another font is used, but it's not "full loaded" font. It's not showing original style of font. Is there something that I need to add so it can show the original "Arabic style", not Arabic font. I am using Google Chrome latest version and attached woff2, woff and truetype format.

Answer

The problem is that the links are pointing to DropBox pages (*.html pages, not *.ttf or *.woff2 or *.woff files), not actual font files. Therefore, the fonts aren't actually loaded. Instead, download the font files onto your server and reference to them using relative paths.

I.e., download the font files to the same directory as the HTML file, and then use this @font-face code instead:

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