Font-face rendering solution for chrome(marshallford.me)
marshallford.me
Font-face rendering solution for chrome
http://marshallford.me/articles/font-face-rendering/
7 comments
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.
To be clear this problem is with Chrome on Windows only, as Chrome isn't yet using DirectWrite ( https://code.google.com/p/chromium/issues/detail?id=124406#c... )
This solution is only useful for Windows and will likely regress the visual fidelity of the font in both Mac and Linux.
This solution is only useful for Windows and will likely regress the visual fidelity of the font in both Mac and Linux.
You may be right, it's only a temporary fix. As for other browsers I'm not sure.
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.
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.
>> 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
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
Wow, this is really strange. When you say jagged do you mean normally or when you zoom in on the text?
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.
Windows 7 Chrome 23, blog looks great, font included, and provides insightful information. Thanks OP.
I am in the same boat as you and all my fonts look fine.
[moved comment as parent in its own right]
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"
fyi, that should be "you're given" and "you're ready"
fixed, thanks.
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.
For some reason, Chrome devs are not in a hurry to implement it.
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:
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;This is great for the hardcore user, but for everyone else I'd prefer to solve it for them in the css.
Where and how do I apply this to my own browser? (userChrome.css or about:config?)
Thanks.
Thanks.