682824 - Problems rendering typefaces

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect)

Description

[Richard]

Attachment: Screenshots.zip

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Steps to reproduce:

The problem appears on a few sites, but it is most obvious here:
Go to www.woothemes.com/themes/
Click on the theme named 'Editorial'
Click to open the 'demo' at the top right of the page
Scroll down the demo until you reach the sub headings such as 'RECENT NEWS', 'A FLEXIBLE MAGAZINE THEME', 'TEXT WIDGET', 'SEARCH THE SITE'.


Actual results:

The font for the above subheadings does not render correctly in Firefox. In Safari it is correct. This problem appears in some of the other themes demos on this site, but I have also noticed Firefox rendering fonts strangely in other places. The preloading of the Gmail homepage for example.
I tried checking the Woothemes demos in Firefox 4 and it seemed to work ok. So it appears to be a problem in updates after Firefox 4.


Expected results:

The Fonts should appear as seen in the Safari browser. The font that Firefox renders seems to change depending on the machine used.

I have attached a screenshot taken in Safari and Firefox 6 using a Macbook Pro (intel) with OSX 10.6.8

Comment 1

[Alice0775 White]

It seems this was caused by landing Bug 623711

Comment 2

[Richard]

(In reply to Alice0775 White from comment #1)
> It seems this was caused by landing Bug 623711

Is there a way to fix this or do I have to wait for an update? Even the Font That I am typing in now is rendered very strange. I've never seen this happen in Firefox before!

Comment 3

[Jonathan Kew [:jfkthame]]

Loading this page (http://demo.woothemes.com/?name=editorial) with the Web Console open reveals a number of errors, including obvious typos in CSS properties, etc. Someone needs to do a bit of validation....

However, I think the specific issue here is clear: the Web Console includes the message:

    downloadable font: rejected by sanitizer (font-family: "League Gothic" style:normal weight:normal stretch:normal src index:0)
    source: http://demo.woothemes.com/editorial/wp-content/themes/editorial/includes/fonts/LeagueGothic.eot
    @ http://demo.woothemes.com/editorial/wp-content/themes/editorial/style.css

Hmm, so the @font-face rule seems to have provided an EOT font - those are definitely not supported. But why wasn't an alternative format such as WOFF or OpenType offered?

Checking the CSS file reveals what I think is the reason. Here's the relevant @font-face rule:

@font-face {
  font-family: "League Gothic";
  src: url("includes/fonts/LeagueGothic.eot");
  src: local("☺"),
  	url("includes/fonts/LeagueGothic.woff") format("woff"),
  	url("includes/fonts/LeagueGothic.otf") format("opentype"),
  	url("includes/fonts/LeagueGothic.svg#LeagueGothicRegular") format("svg"):
}

This has two "src" descriptors; the expectation is obviously that IE will use the first, while non-IE browsers will use the second one, ignoring the first. But look at the very end of it - it has been terminated with a colon, not a semicolon. That's a syntax error, and means this "src" declaration gets ignored completely, so all we have is the EOT source - which Firefox can't use.

Sure enough, earlier in the Web Console output I see the error message:

    Expected end of value but found ':'.  Skipped to next declaration.
    @ http://demo.woothemes.com/editorial/wp-content/themes/editorial/style.css:131

Fix the CSS error(s) and I expect the font will work.

Comment 4

[Richard]

Attachment: The Bugzilla comments page as seen from FF 6.0 OSX10.6.8

This is what I'm seeing in my browser AS I TYPE. This font is driving me nuts. It's only happening in Firefox. Safari is fine and shows the Normal font.

Comment 5

[Jonathan Kew [:jfkthame]]

(In reply to Richard from comment #4)
> Created attachment 556639 [details]
> The Bugzilla comments page as seen from FF 6.0 OSX10.6.8
> 
> This is what I'm seeing in my browser AS I TYPE. This font is driving me
> nuts. It's only happening in Firefox. Safari is fine and shows the Normal
> font.

That's a different problem from the woothemes.com issue with a downloadable font failing to load.

Have you tried troubleshooting steps such as running with a new profile? See http://support.mozilla.com/en-US/kb/Basic%20Troubleshooting for suggestions.

If that doesn't lead to a solution, please file a new report for that problem so that we can track the issues separately.

Comment 6

[Richard]

Hi Jonathan,

I'm on a different mac now, and the Bugzilla page looks ok from here. I will try your suggestion and reset Firefox on the other mac tomorrow. The original problem with woothemes (and other sites) is still occurring in FF 6.0 this mac though.

Comment 7

[philippe (part-time)]

Richard, your problem with the bugzilla page rendering is almost certainly a font cache issue on the affected Mac.
Restart your Mac is 'safe mode' and back in normal mode will clear those caches
http://support.apple.com/kb/ht1455

Comment 8

[Richard]

(In reply to philippe from comment #7)
> Richard, your problem with the bugzilla page rendering is almost certainly a
> font cache issue on the affected Mac.
> Restart your Mac is 'safe mode' and back in normal mode will clear those
> caches
> http://support.apple.com/kb/ht1455

Hi Phillipe, I tried the Safe Boot and now I don't see the weird typeface in Bugzilla. Thank you. I'm going to try Jonathan's tip also to reset Firefox as there were a couple of areas on the Hotmail login screen that didn't look right.

Comment 9

[Richard]

(In reply to Richard from comment #8)
> (In reply to philippe from comment #7)
> > Richard, your problem with the bugzilla page rendering is almost certainly a
> > font cache issue on the affected Mac.
> > Restart your Mac is 'safe mode' and back in normal mode will clear those
> > caches
> > http://support.apple.com/kb/ht1455
> 
> Hi Phillipe, I tried the Safe Boot and now I don't see the weird typeface in
> Bugzilla. Thank you. I'm going to try Jonathan's tip also to reset Firefox
> as there were a couple of areas on the Hotmail login screen that didn't look
> right.

Resetting Firefox was a disaster. When I created the new user it deleted half of the things from my desktop! I won't be doing that again. Also when I restarted after restoring everything from a backup, the font problem here reappeared. 

It maybe that something isn't right in my mac, but even so, the original font rendering problem still exists. I've seen it on different computers, both mac and pc. I think I will have to switch to Safari until it's fixed in FF.

Comment 10

[Jonathan Kew [:jfkthame]]

(In reply to Richard from comment #9)
> the original
> font rendering problem still exists. I've seen it on different computers,
> both mac and pc

Which "original font rendering problem" are you referring to here? This report mentions at least two completely unrelated issues: your bizarre Bugzilla screenshot from comment #4, which almost certainly indicated a local font-cache problem on your machine, and you said was fixed by Safe Boot; and the headings on the woothemes.com site as described in the first comment above. The latter is an error on the site, as explained in comment #3; and I'd expect you to see it on all computers running a current Firefox version because the browser is behaving correctly by ignoring the erroneous CSS.

Please help us untangle the issues here by clarifying exactly which problem(s) you're referring to. If you're seeing other font-rendering problems than those I just mentioned, please file a separate report so that issues don't get confused - thanks.

Comment 11

[Richard]

(In reply to Jonathan Kew from comment #10)
> (In reply to Richard from comment #9)
> > the original
> > font rendering problem still exists. I've seen it on different computers,
> > both mac and pc
> 
> Which "original font rendering problem" are you referring to here? This
> report mentions at least two completely unrelated issues: your bizarre
> Bugzilla screenshot from comment #4, which almost certainly indicated a
> local font-cache problem on your machine, and you said was fixed by Safe
> Boot; and the headings on the woothemes.com site as described in the first
> comment above. The latter is an error on the site, as explained in comment
> #3; and I'd expect you to see it on all computers running a current Firefox
> version because the browser is behaving correctly by ignoring the erroneous
> CSS.
> 
> Please help us untangle the issues here by clarifying exactly which
> problem(s) you're referring to. If you're seeing other font-rendering
> problems than those I just mentioned, please file a separate report so that
> issues don't get confused - thanks.

Hi Jonathan,
Sorry. I'm just getting really frusrated. i need a browser for my work (I'm a designer) and it's very important that the fonts render properly or I can't see things how they are supposed to look. The original problem with FF is as I first described. i first noticed on the Woothemes site, because the changes in typography were very obviously wrong. At first I though it was a problem with my machine (bad fonts, caches etc). But we cleaned everything out and FF was still rendering incorrectly. We aslo checked it on other computes, bothr Mac and Pc running Firefox. Only FF 4 seemed to be ok.

I don't understand what you have written in comment 3 because I'm not a programmer! But if you are saying that the coding of something at the woothemes site is wrong, why does Safari render it correctly?. If it was bad it should appear bad in all browsers, surely?

I am seeing other parts of sites rendered in the wrong typefaces now too. But I cannot tell which is caused by FF and which is caused by a possible prolem in my own machine, since I cannot see anything without using a browser. All I can tell you is that I don't get the type problems in Safari. So some part of the rendering problem is down to a change in FF 5 and upwards.

Clearing the font cache only seemed to fix the problem of the font I saw when typing (the Bugzilla page problem). But it came back as soon as I restarted the machine as normal (which again I dont understand, because having cleared the cache, why would it be wrong again immediately after a restart?)

Comment 12

[Richard]

(In reply to Richard from comment #11)
> (In reply to Jonathan Kew from comment #10)
> > (In reply to Richard from comment #9)
> > > the original
> > > font rendering problem still exists. I've seen it on different computers,
> > > both mac and pc
> > 
> > Which "original font rendering problem" are you referring to here? This
> > report mentions at least two completely unrelated issues: your bizarre
> > Bugzilla screenshot from comment #4, which almost certainly indicated a
> > local font-cache problem on your machine, and you said was fixed by Safe
> > Boot; and the headings on the woothemes.com site as described in the first
> > comment above. The latter is an error on the site, as explained in comment
> > #3; and I'd expect you to see it on all computers running a current Firefox
> > version because the browser is behaving correctly by ignoring the erroneous
> > CSS.
> > 
> > Please help us untangle the issues here by clarifying exactly which
> > problem(s) you're referring to. If you're seeing other font-rendering
> > problems than those I just mentioned, please file a separate report so that
> > issues don't get confused - thanks.
> 
> Hi Jonathan,
> Sorry. I'm just getting really frusrated. i need a browser for my work (I'm
> a designer) and it's very important that the fonts render properly or I
> can't see things how they are supposed to look. The original problem with FF
> is as I first described. i first noticed on the Woothemes site, because the
> changes in typography were very obviously wrong. At first I though it was a
> problem with my machine (bad fonts, caches etc). But we cleaned everything
> out and FF was still rendering incorrectly. We aslo checked it on other
> computes, bothr Mac and Pc running Firefox. Only FF 4 seemed to be ok.
> 
> I don't understand what you have written in comment 3 because I'm not a
> programmer! But if you are saying that the coding of something at the
> woothemes site is wrong, why does Safari render it correctly?. If it was bad
> it should appear bad in all browsers, surely?
> 
> I am seeing other parts of sites rendered in the wrong typefaces now too.
> But I cannot tell which is caused by FF and which is caused by a possible
> prolem in my own machine, since I cannot see anything without using a
> browser. All I can tell you is that I don't get the type problems in Safari.
> So some part of the rendering problem is down to a change in FF 5 and
> upwards.
> 
> Clearing the font cache only seemed to fix the problem of the font I saw
> when typing (the Bugzilla page problem). But it came back as soon as I
> restarted the machine as normal (which again I dont understand, because
> having cleared the cache, why would it be wrong again immediately after a
> restart?)


Sorry about the spelling. I couldn't read the font I was typing in!

Comment 13

[Jonathan Kew [:jfkthame]]

(In reply to Richard from comment #11)
> The original problem with FF
> is as I first described. i first noticed on the Woothemes site, because the
> changes in typography were very obviously wrong. At first I though it was a
> problem with my machine (bad fonts, caches etc). But we cleaned everything
> out and FF was still rendering incorrectly. We aslo checked it on other
> computes, bothr Mac and Pc running Firefox. Only FF 4 seemed to be ok.
> 
> I don't understand what you have written in comment 3 because I'm not a
> programmer! But if you are saying that the coding of something at the
> woothemes site is wrong, why does Safari render it correctly?. If it was bad
> it should appear bad in all browsers, surely?

There are definitely errors in the CSS at the woothemes site, and those errors explain why Firefox does not load the font for the titles in the specific example that was given. Comment #3 describes the problem in some detail; I suggest you report this to the site maintainers - that's who needs to fix this.

It's entirely possible that some browsers are more lenient about error handling, and so end up using the font despite the CSS errors, but this is not behavior you should rely on.

Comment 14

[Richard]

(In reply to Jonathan Kew from comment #13)
> (In reply to Richard from comment #11)
> > The original problem with FF
> > is as I first described. i first noticed on the Woothemes site, because the
> > changes in typography were very obviously wrong. At first I though it was a
> > problem with my machine (bad fonts, caches etc). But we cleaned everything
> > out and FF was still rendering incorrectly. We aslo checked it on other
> > computes, bothr Mac and Pc running Firefox. Only FF 4 seemed to be ok.
> > 
> > I don't understand what you have written in comment 3 because I'm not a
> > programmer! But if you are saying that the coding of something at the
> > woothemes site is wrong, why does Safari render it correctly?. If it was bad
> > it should appear bad in all browsers, surely?
> 
> There are definitely errors in the CSS at the woothemes site, and those
> errors explain why Firefox does not load the font for the titles in the
> specific example that was given. Comment #3 describes the problem in some
> detail; I suggest you report this to the site maintainers - that's who needs
> to fix this.
> 
> It's entirely possible that some browsers are more lenient about error
> handling, and so end up using the font despite the CSS errors, but this is
> not behavior you should rely on.

So the other errors I see in Firefox in other sites are probably because of bad code, and FF unlike Safari, doesn't render them (or can't)? So they appear wrong.

Well that would probably make sense I guess, because I'm only seeing certain areas in certain sites that are bad.

What is happening at my end though? I'm having all kinds of problems when typing here for example. If I clear the font caches in a safeboot, sometimes it helps, but it doesn't stay clear. After a restart the problem comes back. If I disable some fonts, all that happens is that the weird font I type in changes to another one. Its still wrong, just a different one.
Is it a font problem or something between FF and my computer?

I appreciate all your help by the way!

Comment 15

[Jonathan Kew [:jfkthame]]

(In reply to Richard from comment #14)

> What is happening at my end though? I'm having all kinds of problems when
> typing here for example. If I clear the font caches in a safeboot, sometimes
> it helps, but it doesn't stay clear. After a restart the problem comes back.
> If I disable some fonts, all that happens is that the weird font I type in
> changes to another one. Its still wrong, just a different one.
> Is it a font problem or something between FF and my computer?

This sounds to me like a problem with fonts on your machine. (Do you see similar problems on other computers?) I'd suggest using Font Book to validate all your fonts, and see if it reports any problems. Also, go to the "Advanced" section of the "Content" tab in Firefox Preferences and see whether the Serif, Sans-serif and Monospace font popups all show sensible choices.

Comment 16

[Richard]

(In reply to Jonathan Kew from comment #15)
> (In reply to Richard from comment #14)
> 
> > What is happening at my end though? I'm having all kinds of problems when
> > typing here for example. If I clear the font caches in a safeboot, sometimes
> > it helps, but it doesn't stay clear. After a restart the problem comes back.
> > If I disable some fonts, all that happens is that the weird font I type in
> > changes to another one. Its still wrong, just a different one.
> > Is it a font problem or something between FF and my computer?
> 
> This sounds to me like a problem with fonts on your machine. (Do you see
> similar problems on other computers?) I'd suggest using Font Book to
> validate all your fonts, and see if it reports any problems. Also, go to the
> "Advanced" section of the "Content" tab in Firefox Preferences and see
> whether the Serif, Sans-serif and Monospace font popups all show sensible
> choices.

The 'content' font choices are fine. And no this particular problem doesn't happen on the other macs. I think I'm going to take my 'Fonts' folder from this (good) mac and swap it for the one at work where I'm having the problems. I validated the fonts in font book and took out the bad ones, but it didn't really help. I think there is maybe a bad font which it isn't detecting.

One unrelated thing, how do you remove (not disable - I already did that) plugins that you don't want? I cant find them listed anywhere in the Library folders.

Comment 17

[Richard]

(In reply to Richard from comment #16)
> (In reply to Jonathan Kew from comment #15)
> > (In reply to Richard from comment #14)
> > 
> > > What is happening at my end though? I'm having all kinds of problems when
> > > typing here for example. If I clear the font caches in a safeboot, sometimes
> > > it helps, but it doesn't stay clear. After a restart the problem comes back.
> > > If I disable some fonts, all that happens is that the weird font I type in
> > > changes to another one. Its still wrong, just a different one.
> > > Is it a font problem or something between FF and my computer?
> > 
> > This sounds to me like a problem with fonts on your machine. (Do you see
> > similar problems on other computers?) I'd suggest using Font Book to
> > validate all your fonts, and see if it reports any problems. Also, go to the
> > "Advanced" section of the "Content" tab in Firefox Preferences and see
> > whether the Serif, Sans-serif and Monospace font popups all show sensible
> > choices.
> 
> The 'content' font choices are fine. And no this particular problem doesn't
> happen on the other macs. I think I'm going to take my 'Fonts' folder from
> this (good) mac and swap it for the one at work where I'm having the
> problems. I validated the fonts in font book and took out the bad ones, but
> it didn't really help. I think there is maybe a bad font which it isn't
> detecting.
> 
> One unrelated thing, how do you remove (not disable - I already did that)
> plugins that you don't want? I cant find them listed anywhere in the Library
> folders.

Firefox plugins that is.

Comment 18

[Jonathan Kew [:jfkthame]]

(In reply to Richard from comment #17)
> > One unrelated thing, how do you remove (not disable - I already did that)
> > plugins that you don't want? I cant find them listed anywhere in the Library
> > folders.
> 
> Firefox plugins that is.

Try using the uninstaller from whatever product installed them in the first place?

(This question really doesn't belong in this bug report. You can find more information at http://support.mozilla.com, I believe.)