

Font-face rendering solution for chrome - marshallford
http://marshallford.me/articles/font-face-rendering/

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

------
paulirish
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...](https://code.google.com/p/chromium/issues/detail?id=124406#c4)
)

This solution is only useful for Windows and will likely regress the visual
fidelity of the font in both Mac and Linux.

~~~
marshallford
You may be right, it's only a temporary fix. As for other browsers I'm not
sure.

------
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?

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

------
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"

~~~
marshallford
fixed, thanks.

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

