CODEWITHSUNDEEP
htmlcssgoogle-chromefontssafari
Beau Smith
Beau Smith

Reputation: 34367

Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?

Occasionally users report that the text on https://squareup.com looks like gibberish (or garbled) to them… however we’ve been unable to reproduce this.

Users report to be using either Chrome or Safari on Windows, so this may be an issue with webkit.

Here are a three screenshots that have been taken of this occurring on https://squareup.com:

example 1

example 2

example 3

The pricing page on our current site:

example 4

Upvotes: 15

Views: 7838

Answers (9)

PRASANTH
PRASANTH

Reputation: 705

I had same issue and figured out that the problem was with font-face. Among the multiple font source files second preference was for "svg", changed to truetype solved the issue.

Upvotes: 0

user384929
user384929

Reputation:

There is a simple answer to this - your css code is representated prior to your server side processing. I bet your using some type of css php or repository for serving up your style/css/markup/jquery or external source for that page.

I'd suggest you put in some wait states and checks for post process or check your ajax/xajax methods. :)

I hope that helps.

Upvotes: 0

graphicdivine
graphicdivine

Reputation: 11211

It seems to me that the texts in question have text-shadow applied to them. This is pretty bleeding-edge, experimental, demanding, unreliable stuff, for little if any visual value (eg white shadows on a white background).

Upvotes: 1

zethus
zethus

Reputation: 349

Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with @font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.

Upvotes: 14

Conan
Conan

Reputation: 2709

it's a bit of a stab in the dark, but have you considered re-generating the @fontface files, just in case there's some form of corruption which only surfaces when viewed in certain WebKit browser versions?

If you have one, try running a TTF through the FontSquirrel fontface generator:

http://www.fontsquirrel.com/fontface/generator

Upvotes: 2

albert
albert

Reputation: 8153

they probably have clear type turned off. http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

Upvotes: 1

ajsharma
ajsharma

Reputation: 1188

I don't have a surefire answer for you, but it looks like you're using the Modernizr class and looking at your html node in Chrome it has the js fontface class applied to it, which suggests custom font-face problems.

Upvotes: 1

someone
someone

Reputation: 1468

It may be something related to the character encoding. Try explicitly specifying the encoding by putting this in the <head> of the page:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Upvotes: 2

Ben
Ben

Reputation: 13625

Maybe its the custom fonts acting up? When I view your site in firefox it says its in Helvetica Neue but in Chrome it says ag1, agb

Upvotes: 1

Related Questions