15

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

Beau Smith
  • 33,433
  • 13
  • 94
  • 101
  • It may be something to do with the character encoding. But, I am not seeing this in Chrome: http://screencast.com/t/k7LgQYnbD7FW Try @someone's answer. – Nathan Sep 07 '11 at 00:20
  • Are you sure that the problem isn't server-side? Perhaps there's a character problem that Webkit isn't tolerating. Also, have you asked that these users provide their exact browser version? – daveyfaherty Sep 27 '11 at 10:46
  • Couldn't be the issue related to http://stackoverflow.com/questions/5315788/chrome-10-windows-font-face-encoding-trouble ? – duri Sep 27 '11 at 21:25
  • If a person sees this, you should have them look at other UTF-8 encoded sites to see if they see the same issues. That would allow you to check whether it is a squareup issue or something else. – tofutim Sep 30 '11 at 00:01

9 Answers9

14

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.

zethus
  • 349
  • 2
  • 10
  • http://code.google.com/p/chromium/issues/detail?id=39017 Dug through chromium issues and found this article also. Comment 24 has the same issue with an image running Win XP SP3 32-bit I believe. – zethus Sep 28 '11 at 14:08
  • Thanks for this answer. Sorry it took so long to formally accept. Enjoy your +25! – Beau Smith Mar 05 '12 at 19:32
2

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">
someone
  • 1,468
  • 8
  • 9
  • I've got the meta tag specified per HTML5 recommendation `` which should specify the same character encoding, but I’ll try it. – Beau Smith Sep 07 '11 at 00:22
  • Never mind, you're right. For some reason when I was looking at the source code I didn't spot the tag because it was right at the top. – someone Sep 07 '11 at 00:25
2

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

Conan
  • 2,659
  • 17
  • 24
1

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

Ben
  • 13,297
  • 4
  • 47
  • 68
  • The base font for the site is `Helvetica Neue` but as soon as the font file is loaded the `fontface` class is added to the `` tag and then the css applies the `agb` font which is specified by the @fontface directive in the code. So… I don't think this is the issue. Thanks though. =) – Beau Smith Sep 07 '11 at 00:28
  • Nono what I mean is for example `h1` has: `.fontface h1 { font-family: "agb","helvetica neue",helvetica,arial,sans-serif; }` where for example a `p` has no `font-family` styles applied except trough inherit. – Ben Sep 07 '11 at 00:34
  • Also in your screenies the headers seem not affected at all. – Ben Sep 07 '11 at 00:35
  • Neither is the sign up button which has `font: normal 16px/24px "helvetica neue",helvetica,arial,sans-serif;` directly applied to it. – Ben Sep 07 '11 at 00:37
  • Ah, I understand now. Thanks for pointing out this difference. While this could be the cause, it seems odd since the font property values should inherited from the `` tag which has `font: normal 16px "helvetica neue",helvetica,arial,sans-serif`. – Beau Smith Sep 07 '11 at 01:51
1

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.

ajsharma
  • 1,188
  • 1
  • 10
  • 17
1

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

albert
  • 8,112
  • 3
  • 47
  • 63
1

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).

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
0

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.

PRASANTH
  • 695
  • 3
  • 15
  • 33
0

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.