CSS Custom Font Not working

Question

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

Does your inspector show that file as 200 okay or is there an error? — tylerlindell
– tylerlindell, Commented Sep 1, 2014 at 14:29
font/urdu/NOORIN01.TTF path is fine, and no error is there. I think encoding issue etc — Wasim A.
– Wasim A., Commented Sep 1, 2014 at 14:30
i have provide code and font aswell so expert can test it themselves. — Wasim A.
– Wasim A., Commented Sep 1, 2014 at 14:32
i guess in html its doesn't matter because its insensitive. however i have checked it too, its doesn't solve the problem — Wasim A.
– Wasim A., Commented Sep 1, 2014 at 14:36

Jukka K. Korpela · Accepted Answer · 2014-09-01 16:04:38Z

1

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.

answered Sep 1, 2014 at 16:04

Jukka K. Korpela

203k38 gold badges281 silver badges407 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wasim A. Over a year ago

this is urdu language standard font, do i need to create my own font for urdu, any method to show even a few character with existing font. How to proceed

Jukka K. Korpela Over a year ago

@Wasim, I wonder what that standard might be. Anyway, finding a font suitable for a specific language is a different question, and off-topic at SO. Anyway, modern versions of Arial supports Urdu, and in general you can expect your visitor’s browsers to be able to render Urdu text even if you don’t do anything.

Collectives™ on Stack Overflow

CSS Custom Font Not working

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related