This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
Created attachment 1211 [details] Combination shot of text rendering issues described in this bug. There are a myriad of issues with type rendering on the site, both with Gudea (the sans-serif) and Bitter (the serif). I'm observing these in both Chrome 24 and Firefox 15 on Windows 7. (IE has its own major problem: not loading the webfonts at all. That deserves its own bug.) * Bitter frequently has inconsistent letter heights. For a very obvious example, see "SVG" in the <h2>s on the attached shot. The 'V' is noticeably taller. Also see the word "CHAT" in the main nav bar on any page (also in attachment). Can be remedied in most cases by adjusting the font-size value up or down by one pixel. ('h2' from 20 to 21px and '#sitenav a' from 16 to 17px) * The bold variant of Gudea at the typical body copy size of 14px looks dreadful. (See attachment.) Most notably, the counters of 'a's and 'e's get filled in. This one is a little trickier to deal with, as increasing or decreasing the size of all body copy has a major impact site-wide, moreso than tweaking display sizes by one pixel. I think the best solution might simply be to pick a new sans-serif webfont that is better hinted for setting at body sizes.
Looks like Bitter and Guidea have bad hinting, which is common in free web fonts. Not sure there’s much we can do here, except completely changing the design :( Hopefully these issues will be somewhat mitigated if we increase the font size, as suggested by #19423
(In reply to comment #1) > Looks like Bitter and Guidea have bad hinting, which is common in free web > fonts. Not sure there’s much we can do here, except completely changing the > design :( > > Hopefully these issues will be somewhat mitigated if we increase the font > size, as suggested by #19423 With all due respect (sincerely), do you consider changing the font size by 1 pixel (especially in the main nav and headings) to be "completely changing the design"? I gave you very specific suggestions that would completely remedy the issue. I can provide before and after shots with testing done in Firebug, as well, if that would be helpful. (I now realize that I could have been more clear in my initial bug: I did test these changes with Firebug, and they do indeed correct the issue.) Yes, increasing the body copy size to 15px would fix the issue. If you go bigger than that, I would simply encourage you to check both the normal and bold variants at whatever size you choose in Windows. it's often the case that 1px up or down will solve the issue.
(In reply to comment #2) > (In reply to comment #1) > > Looks like Bitter and Guidea have bad hinting, which is common in free web > > fonts. Not sure there’s much we can do here, except completely changing the > > design :( > > > > Hopefully these issues will be somewhat mitigated if we increase the font > > size, as suggested by #19423 > > With all due respect (sincerely), do you consider changing the font size by > 1 pixel (especially in the main nav and headings) to be "completely changing > the design"? I gave you very specific suggestions that would completely > remedy the issue. I can provide before and after shots with testing done in > Firebug, as well, if that would be helpful. > > (I now realize that I could have been more clear in my initial bug: I did > test these changes with Firebug, and they do indeed correct the issue.) > > Yes, increasing the body copy size to 15px would fix the issue. If you go > bigger than that, I would simply encourage you to check both the normal and > bold variants at whatever size you choose in Windows. it's often the case > that 1px up or down will solve the issue. Apologies, I didn’t realize you had actually tested this and that it fixes the issue. Indeed, that doesn't sound like it would be a problem. :)
(In reply to comment #3) > Apologies, I didn’t realize you had actually tested this and that it fixes > the issue. Indeed, that doesn't sound like it would be a problem. :) Thanks :) And my apologies; I'm still getting the hang of how to file bugs in a major collaborative project such as this. I would be glad to perform the actual implementation, if you could guide me as to how to go about doing that.
(In reply to comment #4) > (In reply to comment #3) > > Apologies, I didn’t realize you had actually tested this and that it fixes > > the issue. Indeed, that doesn't sound like it would be a problem. :) > > Thanks :) And my apologies; I'm still getting the hang of how to file bugs > in a major collaborative project such as this. I would be glad to perform > the actual implementation, if you could guide me as to how to go about doing > that. I’m afraid you can’t yet :( It requires changes in the CSS and WebPlatform is not yet up on a remote repo where it could accept pull requests in.
(In reply to comment #5) > (In reply to comment #4) > > (In reply to comment #3) > > > Apologies, I didn’t realize you had actually tested this and that it fixes > > > the issue. Indeed, that doesn't sound like it would be a problem. :) > > > > Thanks :) And my apologies; I'm still getting the hang of how to file bugs > > in a major collaborative project such as this. I would be glad to perform > > the actual implementation, if you could guide me as to how to go about doing > > that. > > I’m afraid you can’t yet :( > It requires changes in the CSS and WebPlatform is not yet up on a remote > repo where it could accept pull requests in. Understood. I'll keep filing bug reports, then!
For Chrome fonts issus, this line in body{} should smoother the render: -webkit-font-smoothing: antialiased;
I tested "-webkit-font-smoothing: antialiased;" but didn't see any improvements (also tried the other values for that property). I played around with the CHAT <a> element. Something that seemed to help was removing the font-weight. Normal, italic and even italic bold looked OK in my Chrome and FF on Win7, but just bold has the mentioned problems. Also, as already mentioned, another thing that helped was finding a font-size that looked ok.
It looks like it could be a woff issue, perhaps a too compressed file. It's a problem that occurs when we use google webfonts and while I don't know if the website is using this service it's just an hypothesis. The best solution is to download the OTF and to generate a new woff file and use the whole font-face propriety without Google Webfonts. I'll enclosed a full package. Here's the code @font-face { font-family: 'bitterbold'; src: url('bitter-bold-webfont.eot'); src: url('bitter-bold-webfont.eot?#iefix') format('embedded-opentype'), url('bitter-bold-webfont.woff') format('woff'), url('bitter-bold-webfont.ttf') format('truetype'), url('bitter-bold-webfont.svg#bitterbold') format('svg'); font-weight: bold; font-style: normal; }
Created attachment 1229 [details] Bitter Webfonts
(In reply to comment #10) > Created attachment 1229 [details] > Bitter Webfonts Hi Sebastien, Thank you for this. Have you verified it solves the problems described in this bug report?
No, I didn't for the simple raison I can't access to the css to test. The patch is based on an hypothesis. But I can test it if I have a copy of the css :)
(In reply to comment #12) > No, I didn't for the simple raison I can't access to the css to test. The > patch is based on an hypothesis. But I can test it if I have a copy of the > css :) The main CSS file is: http://docs.webplatform.org/w/skins/webplatform/screen.css
In Chrome and Firefox you can live-edit the css in a free-form text editor (Sources panel and Scratchpad, respectively). I've used those for testing css changes.
Thanks Paul, I'll test it as soon as Paris Web is over :) (I never think enough about Firebug).
Paul > I can't run the tests with firebug as the css is hidden "Access to restricted URI denied". All > I used this a week ago for another website and it fixed the rendering. The solution is to exchange svg and woff links place in font-face. Again, I'm sorry i couldn't test it on webplatform. http://www.vandersterren.com/blog/2012/04/font-embedding-chrome-and-anti-aliasing/
The problem come from the native font file as you can see on the attachments they are rendering issues with bitter-bold-webfont.ttf when Bitter-Bold.ttf doesn't show any sign of problems with Windows XP - Chrome. IF you want to see it by yourselves: http://desbenoit.net/123581321/BitterBold-Native.html http://desbenoit.net/123581321/BitterBold-Webplatform.html
Created attachment 1241 [details] BitterBold-Webfont.ttf rendering on Windows XP - Chrome
Created attachment 1242 [details] Bitter-Bold.ttf rendering on Windows XP - Chrome
(In reply to comment #17) > The problem come from the native font file as you can see on the attachments > they are rendering issues with bitter-bold-webfont.ttf when Bitter-Bold.ttf > doesn't show any sign of problems with Windows XP - Chrome. > > IF you want to see it by yourselves: > http://desbenoit.net/123581321/BitterBold-Native.html > http://desbenoit.net/123581321/BitterBold-Webplatform.html Fascinating... It almost seems like the two versions are triggering entirely different rendering modes. I observe the same effect in Firefox 16, for what it's worth.
Created attachment 1256 [details] New Bitter-Bold font package Here's a new package of the Bitter Bold font for web. Before going live, you can see the changes here: Native Bitter Bold: http://desbenoit.net/123581321/BitterBold-Native.html Webplatform Bitter Bold: http://desbenoit.net/123581321/BitterBold-Webplatform.html Package ttf Bitter Bold: http://desbenoit.net/123581321/BitterBold-test.html Package woff Bitter Bold: http://desbenoit.net/123581321/BitterBold-test-woff.html
Hi all, Could anyone test or upload the new webfont versions on WPD? Thanks a lot.
Created attachment 1278 [details] Gudea font Here's a package for an updated Gudea font. I applied the same treatment as Bitter
Created attachment 1281 [details] Bitter-Regular and Bitter-Italic Update with italic and regular bitter