What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

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.

share|improve this question
    
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 Jul 27 '12 at 13:27
1  
No, bog standard installation on windows. The blog is the only SE site it happens on. –  vascowhite Jul 27 '12 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 Jul 27 '12 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 Jul 27 '12 at 13:45
    
Okay, I added a new jsFiddle to my answer so you can get the culprit ;-) –  Arjan Jul 27 '12 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 Jul 27 '12 at 13:50
    
There is a typo in CSS pokit.org/get/img/8ffb8ec044eac0c095df18d6ba740bba.png –  webarto Jul 27 '12 at 13:50
    
Ah, nice @Vasco. Does changing that in the jsFiddle help? –  Arjan Jul 27 '12 at 13:51
    
@webarto, are you posting that as an answer? –  Arjan Jul 27 '12 at 13:52
    
@Arjan no, he probably has incomplete Helvetica Neue/Helvetica, it default for me to Arial, about sans-seris, just saiyan... –  webarto Jul 27 '12 at 13:53
    
Okay, @webarto, let's see what changing the jsFiddle brings vasco then... –  Arjan Jul 27 '12 at 13:54
    
@Arjan It works if I remove the Helvetica Neue,so I need to look at that. –  vascowhite Jul 27 '12 at 13:55

2 Answers 2

up vote 4 down vote accepted

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.

share|improve this answer
1  
"Helvetica Neue is not a free font and should be removed from CSS." -- Where's the logic in that? –  balpha Jul 27 '12 at 14:12
    
I deleted Helvetica Neue and now the blog displays properly. Thanks. –  vascowhite Jul 27 '12 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 Jul 27 '12 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. –  webarto Jul 27 '12 at 14:28
4  
@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 Jul 27 '12 at 14:34
    
Ahum, putting it at the end in the CSS font-family kind of implies it will probably never be used...? –  Arjan Jul 27 '12 at 14:42
    
@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. –  webarto Jul 27 '12 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 Jul 27 '12 at 16:43

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

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

You must log in to answer this question.

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