HN Explorer

17 comments

[ 2.9 ms ] story [ 46.3 ms ] thread
wcarss
Just for information's sake, the font that this blog post is written in appears jagged in Chrome 23 on my Windows 7 machine, with ClearType configured.
mahesh_rm
Windows 7 Chrome 23, blog looks great, font included, and provides insightful information. Thanks OP.
marshallford
I am in the same boat as you and all my fonts look fine.
Surio
[moved comment as parent in its own right]
cabirum
The real solution is to use DirectWrite API in Chrome (both FF and IE use it for a long time now).

For some reason, Chrome devs are not in a hurry to implement it.

elktea
Firefox and IE, by default, use an odd hybrid approach where large fonts get DirectWrite but smaller fonts fall back to 'GDI' style rendering.

If you're using Firefox try these preferences out for a full DirectWrite experience:

    gfx.font_rendering.directwrite.enabled: true;
    gfx.font_rendering.directwrite.use_gdi_table_loading: false;
    gfx.font_rendering.cleartype_params.force_gdi_classic_max_size: 6;
    gfx.font_rendering.cleartype_params.force_gdi_classic_for_families: ''; (delete the string)
    gfx.font_rendering.cleartype_params.rendering_mode: 5;
marshallford
This is great for the hardcore user, but for everyone else I'd prefer to solve it for them in the css.
Surio
Where and how do I apply this to my own browser? (userChrome.css or about:config?)

Thanks.

bmuon
My frontender intuition says something else is wrong and forcing the use of the SVG version might cause trouble in other browsers. Last I checked Chrome on Windows uses Skia, a different graphics library than Safari, which is usually the culprit behind its rendering issues. It may be that Skia renders SVG nicely, but other rendering engines may have issues with SVG in small sizes. And how about Chrome on OSX or Linux? This may need a little more research to figure out what's going on.
cheald
SVG is definitely right for icon fonts in Chrome, but it makes text fonts look blurry (rather than jagged). It's perhaps more aesthetically pleasing, but it's definitely harder to read.

This effect is present in this blog post. See http://cl.ly/image/0E1g1Z3F3t31 for example. It's less pronounced with larger font faces, but the aliasing makes the text feel fuzzy rather than crisp. At smaller font weights, it's downright blurry and very unpleasant to read.

Surio
>> appears jagged in Chrome 23 on my Windows 7 machine, with ClearType configured.

Same here.

I have a Stylish script configured to render "safe" fonts every time I am "forced" to use Chrome. Chrome is also very memory intensive on my machine (4GB RAM anyway!)

This font rendering bug is really such a long running joke on Chrome that it might just end up being elevated into some kind of "this is no bug, this one is a Chrome feature!" /frustrated

marshallford
Wow, this is really strange. When you say jagged do you mean normally or when you zoom in on the text?
[dead] Surio
Just viewed normally, actually. TBH, I was full of hope too on reading your workaround to see it it works :-) I actually fired up Chrome [portable] after a long time and disabled Stylish just to check it out. :-/

Off topic: Chrome has developed a nasty habit of installing itself into my [User name] even when running a portable version.. Bizarre and Creepy! I only come to know of it because it promptly pins itself to my Taskbar!

molecule
When downloading a hosted font or after converting your own .tff your given a zip with all the font formats along a stylesheet that contains the @font-face declaration. After copying the css to your main css file your ready to use the font.

fyi, that should be "you're given" and "you're ready"