Chrome wrapping text when using multiple languages and web fonts on windows

Question

I have a site that has content in Arabic and English, I'm using a web font for styling the headers and some buttons Source Sans Pro for English and Droid Arabic Kufi for Arabic, so basically my css would look like this:

.header {
    font-family: 'Droid Arabic Kufi', 'Source Sans Pro', sans-serif;
}

The problem happens in Chrome on Windows when the element has a float style or is displayed as an inline-block, it for some reason wraps the text even it's not necessary, here is an example:

This is the sample on Mac, it shows on one line, with 156px width.

This is the sample on Windows, it shows on two lines with 154px width.

If I add white-space: nowrap; to the element windows will show it right, and what really makes it weird is that it uses the same width 154px.

I don't want to apply white-space: nowrap; because sometimes I need to wrap the text, and it's not an easy job to look for places where we need to use the custom font and not wrap the text.

I think the problem has something to do with white spaces, especially because I faced an issue that sometimes whitespace is replaced by a rectangle on Chrome

This issue only shows in Chrome on Windows.

Answer 1

I have a similar problem, and using white-space: nowrap; is not an option.

We just have to wait for a chrome update, as I tested the same page in chrome beta channel v32 and no unnecessary wrapping was performed.

Answer 2

I had a similar problem with various Google Web fonts in Chrome.

I added a space to the end of the printed text and chrome was able to resolve the length and wrapping properly.

My 2c on why this works

My guess is there is some extra step in rendering web-fonts and executes after the css-preprocessor has worked out the font spacing. Adding the extra space acts as a buffer for the css preprocessor.