2

When I view the blog I get results like this (taken from here):-

enter image description here

The source of the page shows this, which I think is correct:-

<!DOCTYPE html>
<html lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

I am using Chrome V 20.0.1132.57 on Windows 7 Pro 64bit with the encoding set to autodetect and showing UTF-8 selected in the menu.

Is anybody else experiencing this? It makes the blog very hard to read and I'd like to do something about it if I can.

12
  • No issue here (Chrome, OS X). And the server reports Content-Type: text/html; charset=UTF-8 too, so no confusion there either. Are you using some non-standard fonts? For me it's using Helvetica (the 2nd choice in the CSS).
    – Arjan
    Commented Jul 27, 2012 at 13:27
  • 1
    No, bog standard installation on windows. The blog is the only SE site it happens on.
    – vascowhite
    Commented Jul 27, 2012 at 13:32
  • Any way to tell what font it's using? On a Mac, copying & pasting into a rich text editor, and then seeing the selected font in the font dropdown is the only way I know.
    – Arjan
    Commented Jul 27, 2012 at 13:36
  • @Arjan You were right, when I switch off the font-family in the css with Chrome's developer tools the page shows correctly. If you want to post that as an answer I can accept it.
    – vascowhite
    Commented Jul 27, 2012 at 13:45
  • Okay, I added a new jsFiddle to my answer so you can get the culprit ;-)
    – Arjan
    Commented Jul 27, 2012 at 13:49
  • 1
    I don't think this line in the css helps :- 'Helvetica Neue', Helvetica, Arial, Sans-seris. What is sans-seris :)
    – vascowhite
    Commented Jul 27, 2012 at 13:50
  • There is a typo in CSS pokit.org/get/img/8ffb8ec044eac0c095df18d6ba740bba.png Commented Jul 27, 2012 at 13:50
  • Ah, nice @Vasco. Does changing that in the jsFiddle help?
    – Arjan
    Commented Jul 27, 2012 at 13:51
  • @webarto, are you posting that as an answer?
    – Arjan
    Commented Jul 27, 2012 at 13:52
  • @Arjan no, he probably has incomplete Helvetica Neue/Helvetica, it default for me to Arial, about sans-seris, just saiyan... Commented Jul 27, 2012 at 13:53
  • Okay, @webarto, let's see what changing the jsFiddle brings vasco then...
    – Arjan
    Commented Jul 27, 2012 at 13:54
  • @Arjan It works if I remove the Helvetica Neue,so I need to look at that.
    – vascowhite
    Commented Jul 27, 2012 at 13:55

2 Answers 2

5

Helvetica Neue is not a free font and should be removed from put behind in CSS font-family, like on Stackoverflow main site.

font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;

font-family: 'Helvetica Neue', Helvetica, Arial, Sans-seris;

There is a typo, Sans-seris should be Sans-serif, but that is not a problem.

Problem is that you have incomplete Helvetica Neue font on your computer, or font doesn't support &#8220; character (and similar).

Arial is very similar to Helvetica, and majority of computers has it.

If non web safe fonts are used, they should be offered to be downloaded in CSS e.g font-face.

List of free webfonts: http://www.google.com/webfonts/


FYI, Helvetica Neue is not a WIndows system font. It is a system font that is bundled with recent versions of the MacOS with some form of the words Helvetica and Neue in the name of the font.

http://forums.adobe.com/message/4166767#4166767


I see now that Wordpress is hiding beneath blog post. I have solution for that: rm -rf wp-*. No wonder why Jeff is writing PHP rants when Wordpress is flagship of PHP with its maybe_ functions.

8
  • 1
    "Helvetica Neue is not a free font and should be removed from CSS." -- Where's the logic in that?
    – balpha StaffMod
    Commented Jul 27, 2012 at 14:12
  • I deleted Helvetica Neue and now the blog displays properly. Thanks.
    – vascowhite
    Commented Jul 27, 2012 at 14:14
  • Though indeed that font seems to be the culprit, why not include it just because it's not free? People might have it installed legally. (It seems to come with Adobe software.) And many OS-provided fonts are not really free either; for a Windows user Helvetica is not free? Using @font-face would require a license too, though then paid for by Stack Exchange.
    – Arjan
    Commented Jul 27, 2012 at 14:26
  • @balpha "FYI, Helvetica Neue is not a Windows system font . It is a system font that is bundled with recent versions of the MacOS with some form of the words Helvetica and Neue in the name of the font." ... so you are saiyan you don't care and we should buy a Mac? If not, make sure you provide font. Ok, scratch remove... replace order like on Stackoverflow: font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; Thanks. Commented Jul 27, 2012 at 14:28
  • 5
    @webarto The point of CSS font stacks is "If font X is installed, use that; if not, try the next one". I certainly don't want to force you to by a Mac (I'm well known for not liking Apple). With the given font stack (sans the typo, about which you're obviously right), if the user doesn't have Helvetica Neue, then Helvetica is tried. Then Arial, and then whatever the default sans-serif font is. How is that forcing anyone to buy Helvetica Neue? And why would being a Windows system font make a font any... better, for lack of a better word?
    – balpha StaffMod
    Commented Jul 27, 2012 at 14:34
  • Ahum, putting it at the end in the CSS font-family kind of implies it will probably never be used...?
    – Arjan
    Commented Jul 27, 2012 at 14:42
  • 1
    @balpha Sorry, I haven't expressed myself correctly. I'm not saying you are forcing anyone to do anything, sorry about that. If you put Arial at first place, chances are that every computer has it, and blog is shown the The Way It's Meant to be Played™ to ~everyone. And the reason I posted google.com/webfonts is that there are plenty of good fonts there, and by using that you make sure everyone sees blog as intended, opposite to Helvetica Neue, which you might, or might not, have. Thank you for your time, and if it doesn't make logic, sorry in advance. Commented Jul 27, 2012 at 14:52
  • Not trying to harass you, but just curious: if all worked well, then some apparently favor Helvetica and Helvetica Neue over Arial, and it should work like @balpha explained? (I know some Mac users begged for Helvetica on these sites, and some even uninstall Arial...) So I still feel that changing the order to put less common fonts at the end is never a solution. (And, if Helvetica Neue is faulty, I guess it should be removed altogether.)
    – Arjan
    Commented Jul 27, 2012 at 16:43
3

I'm afraid this must be a local issue. The server is sending encoded entities, like:

<p>And the newbies will say, &#8220;well, gosh, that&#8217;s 
not a very friendly place.&#8221;</p>

That can hardly be messed up by a wrong encoding on the server side?

So, it's probably some font issue: you can try to play around with the fonts that work for you in this jsFiddle.

(Also, the server sends Content-Type: text/html; charset=UTF-8, so no confusion there either.)

3
  • Hmm, I think you're probably right. It seems strange that it is only the blog though. I'll keep digging.
    – vascowhite
    Commented Jul 27, 2012 at 13:37
  • Do you get the same in this copy?
    – Arjan
    Commented Jul 27, 2012 at 13:43
  • I don't think this line in the css helps :- 'Helvetica Neue', Helvetica, Arial, Sans-seris. What is sans-seris :)
    – vascowhite
    Commented Jul 27, 2012 at 13:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .