Databases
StackOverflow2013
Postsdbo
POMaking CSS3 @font-face font rendering play nice with ClearType on Windows
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking CSS3 @font-face font rendering play nice with ClearType on Windows
    primarykey
    data
    text
    <p>First some background information.</p> <p>It seems that using the CSS3 @font-face rule can interact in unexpected and undesired ways with ClearType font renderingv in any browser, on any version of Windows (XP and above.)</p> <p>I first documented this as a <a href="http://code.google.com/p/googlefontdirectory/issues/detail?id=44" rel="noreferrer">Google Font Directory bug</a> when I ran into it. Further research seems to yield conflicting information; having ClearType enabled or disabled can either help or hurt how a @font-face font renders in any web browser in Windows. Whether ClearType helps or hurts seems to be totally dependent on the font(s) being used, and what kind of hinting is built into them.</p> <p>For example, a <a href="http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems" rel="noreferrer">thread on TypeKit's support site</a> seems to point to font rendering problems when ClearType is DISABLED. However, a <a href="http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/" rel="noreferrer">jQuery plug-in</a> was developed to improve font rendering when ClearType is ENABLED, but the plug-in only works in Internet Explorer. Interestingly, the font used on the plug-in's demo pages does render poorly when ClearType is enabled, but when it's disabled the two demo pages render identically/correctly.</p> <p>So given all of that background information and prior research, my question is:</p> <p><strong>What's the best way/compromise to ensure decent font rendering for modern browsers on all platforms, regardless of Windows ClearType settings?</strong></p> <p>My first idea was to use stylesheets that include the @font-face fonts by default. JavaScript could detect the user's OS, and if Windows is detected, could programmatically modify stylesheet classes to use font-families that don't include the @font-face fonts so that system-native fallback fonts are used. I realized later that someone else also thought of <a href="http://blog.costan.us/2011/02/quick-fix-for-ugly-font-rendering-in.html" rel="noreferrer">this</a>. It's a hacky and inelegant solution though. Ideally I want my web fonts to be usable regardless of the platform without relying on something like sIFR or Cufon.</p> <p>Does anyone have pointers or better ideas?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USistruble
    1. USsegfault
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMaking CSS3 @font-face font rendering play nice with ClearType on Windows
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMaking CSS3 @font-face font rendering play nice with ClearType on Windows
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMaking CSS3 @font-face font rendering play nice with ClearType on Windows
      1. USvincicat
      1. VTFavorite
    1. COI'm suffering from the same illness. No cure found yet... :)
      singulars
      1. POMaking CSS3 @font-face font rendering play nice with ClearType on Windows
      1. USYoav Weiss
    2. CO[Same question & fixes here](http://stackoverflow.com/q/11487427/1114320) and I've written a [blog post with lot's of screenshots and solutions here](http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/)
      singulars
      1. POMaking CSS3 @font-face font rendering play nice with ClearType on Windows
      1. USSliq
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload