Why my wordpress website does not display urdu text fully while searching for any thing on its search bars?

Question

Hell0, I have a WordPress website which I have edited for urdu website. When opening this website on a computer it works well and there is no problem. But when you open this website through an android mobile and go to search bars and enter urdu words there, the words does not look clearly to us. This is the main problem which should be fixed. Check the website now for this issue at http://www.madaklasht-today.com.

I also used paddings, padding top, padding bottom, margin, margin top, margin bottom, height, line height etc for fully displaying the urdu text but each of theme did not work.

(Note): I am using Jameel Noori Nastaleeq font. Please fix the issue with the base of this font.

Thanks

Answer 1

you should use @font-face for including webfonts. src is not valid outside @font-face (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) – nevertheless, there are a few very tolerant browsers.

Remove your styles from style.css line 45–52 and put the following on the top of the file:

@font-face {
    font-family: 'nafeesnastaleeq';
    src: url('fonts/nafees/nafeesnastaleeq.eot');
    src: url('fonts/nafees/nafeesnastaleeq.eot?#iefix') format('embedded-opentype'),
        url('fonts/nafees/nafeesnastaleeq.woff') format('woff'),
        url('fonts/nafees/nafeesnastaleeq.ttf') format('truetype'),
        url('fonts/nafees/nafeesnastaleeq.svg#nafeesnastaleeq') format('svg');
    font-weight: normal;
    font-style: normal;
}

now you can call your font in the body via

body {
    font-family: 'nafeesnastaleeq', sans-serif;
}