0

I have an x-height problem with Arabic fonts - it basically breaks the existing layout forcing me to use "height" attribute on some input/form elements. Which is not cool.

The UI uses Roboto for Latin languages, and Droid Kufi for Arabic. Somehow Roboto doesn't include Arabic characters, so I had to convert Droid Kufi to a webfont with FontSquirrel. The problem is that the x-height of the Arabic font is greater than that of the Latin Roboto, so all input fields, selects and the lines in general are spaced more generously than those of the Latin languages. Which is a bummer, because the layout looks weird now.

Turning Droid Kufi off and falling back to system fonts makes everything look good again.

So any tips on either converting or CSS styling (except for the quite articulate "height" attribute) to handle both fonts equally?

pop
  • 3,464
  • 3
  • 26
  • 43
  • And selecting all character sets (step 2) is not enough? http://www.google.com/fonts#UsePlace:use/Collection:Roboto – Stephan Bijzitter Feb 10 '15 at 13:43
  • The font files must be self-hosted. :-/ – pop Feb 10 '15 at 13:44
  • Add it locally in a simple .html file, run the file with the inspector open, save the downloaded font files :) – Stephan Bijzitter Feb 10 '15 at 13:58
  • What do you mean by “x-height for Arabic fonts”? How did you infer its value, and exactly how it makes your layout weird? Please show some actual code example (with content, HTML, and CSS) and describe the problem by referring to what actually happens. – Jukka K. Korpela Feb 10 '15 at 15:15
  • Here you go: http://bureau-gesamt.com/extranet/so/inputs-arabic.png http://bureau-gesamt.com/extranet/so/inputs-latin.png The CSS for – pop Feb 10 '15 at 15:59

0 Answers0