CODEWITHSUNDEEP
cssencodingfontsfont-facecustom-font
Wasim A.
Wasim A.

Reputation: 9890

CSS Custom Font Not working

I have installed new font in windows and now i want to use that font in my web as a custom font. In image below it will describe all of my problem https://i.sstatic.net/GybED.png

enter image description here

Here is my Code

<html>
    <head>
        <meta charset='uft-8' />
        <style type="text/css">
            @font-face {
                font-family: urdu;
                src: url(font/urdu/NOORIN01.TTF);
            }
            @font-face {
                font-family: eng;
                src: url(font/sansation_light.woff);
            }

            body{
                font-size:30px;
            }
            .urdu{font-family:'urdu';}
            .eng{font-family:'eng';}
        </style>
    </head>
    <body>
        <div class='urdu'>میں نے آپ کے مسئلے کو قتل کرنے جا رہا ہوں</div>
        <div>میں نے آپ کے مسئلے کو قتل کرنے جا رہا ہوں</div>
        <div class="eng">The quick and brown fox jump over the lazy dog.</div>
    </body>
</html>

here are font files
http://speedy.sh/WdxpP/sansation-light.woff
http://speedy.sh/wEzZ6/NOORIN01.TTF

Upvotes: 0

Views: 2240

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201846

The font is broken. I tested with the NOORIN01.TTF font available from the address specified and tested with the code in the question. This is what I see in Firefox console (on Win 7):

downloadable font: hdmx: Table discarded (font-family: "urdu" style:normal weight:normal stretch:normal src index:0)
source: [...]
downloadable font: not usable by platform (font-family: "urdu" style:normal weight:normal stretch:normal src index:0)
source: file:///C:/Users/Jukka/Documents/Fonts/NOORIN01.TTF

Looking at the font in a font inspector, I notice that the characters are assigned to Private Use codepoints. This could “work” as such, but then the HTML content needs to contain those code points. And it apparently fails to work since some table in the font is broken.

The conclusion is: find another font.

Upvotes: 1

Related Questions