Google Chrome Font Rendering

Question

I am encountering an issue with basic font rendering in Google Chrome Canary. I am embedding the typeface "Proxima Nova" onto a site I am developing via Typekit. Currently this is only hosted locally, so I will have to do my best to show the issue through screenshots and code samples.

Long story short, any time I use any webfont, in Google Chrome Canary (currently 40.0.2202.3), my fonts are rendering way too heavy. Briefly, for less than a second after page load, the font is rendered at the correct thickness and then it will fatten up within a second of the browser load. I have tried disabling all plugins and the issue still exists. When I disable CSS on the page, it renders consistently with other browsers (as one would expect). Fonts render properly in Chrome 38 & 39, as well as all other major browsers. I have tested in both Windows and Mac OS with the same results. I created a codepen to demo this, which has the exact HTML and CSS that is in place on the site: http://codepen.io/idealbrandon/pen/EGlDa

HTML

<div class="wrapper">
  <aside class="masthead">
    <h1 class="h2">Advancing Drainage through J-DRain, Grid-Guard and TurfCore.</h1>
    <p class="h3">Sed consequat pretium dictum. Viva mus blandit, turpis sed es ultrices sollicitudin, risus seme finibus ipsum, in faucibus diam dolor vel felis.</p>
  </aside>
  <main>
    This is the main section
  </main>
</div>

SASS/SCSS

// Standard Measurements
$max-width:             102.4rem;
$base-font:             1.4rem;
$baseline:              $base-font*1.5;

// Media Queries
$small-up:               "only screen and (min-width: 320px)";
$small-up2:              "only screen and (min-width: 450px)";
$medium-up:              "only screen and (min-width: 600px)";
$large-up:               "only screen and (min-width: 1050px)";

// Font Declerations
$font-body:             'proxima-nova', sans-serif;
$font-icon:             'jdr';

// Color
$black:                 #000000;
$white:                 #FFFFFF;
$gray:                  #323132;
$gray-light:            #939597;
$blue:                  #0970B8;
$green:                 #38B449;

html {
  font-size: 62.5%;
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font: {
    family: $font-body;
    size: 1.4rem;
  }
  color: $gray;
  background-color: $white;
  line-height: $baseline;
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
  //text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  margin-bottom: $baseline;

  &.align-left {
    float: left;
    margin: 0 $baseline $baseline 0;
  }

  &.align-right {
    float: right;
    margin: 0 0 $baseline $baseline;
  }
}

.wrapper {
  height: 100%;
}

// Mini Reset
//// Setting type to baseline grid
p,
ul,
ol,
dl {
  margin-bottom: $baseline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-body;
  line-height: normal;
  font-weight: normal;
  margin: 0;
  margin-bottom: $baseline;
}

h1,
.h1 {
  font-size: 3.2rem;
  line-height: 3.6rem;

  @media #{$medium-up} {
    font-size: 3.6rem;
    line-height: 4.0rem;
  }
}

h2,
.h2 {
  font-size: 2.6rem;
  line-height: 3.0rem;

  @media #{$medium-up} {
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
}

h3,
.h3 {
  font-size: 2.0rem;
  line-height: 2.4rem;

  @media #{$medium-up} {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}

h4,
.h4 {
  font-size: 1.8rem;
  line-height: 2.2rem;

  @media #{$medium-up} {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

h5,
.h5 {
  font-size: 1.6rem;
  line-height: 2.0rem;

  @media #{$medium-up} {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
}

h6,
.h6 {
  font-size: 1.4rem;
  line-height: 1.6rem;

  @media #{$medium-up} {
    font-size: 1.0rem;
    line-height: 1.4rem;
  }
}

p,
.p {
  font-size: 1.6rem;
  line-height: $baseline;

  @media #{$medium-up} {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

.masthead {
  width: $baseline*20; // 420px
  background-color: $gray;
  height: 100%;
  color: $white;
  float: left;
  padding: $baseline*3 $baseline*4;
  line-height: normal;
}

main {
  background: url('build/img/city-hall.jpg') no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  margin-left: $baseline*20; // This is the same distance as the width of the sidebar
}

Even through Codepen, this issue remains. Anyone have any clue here? Or should I just not worry about it since its only a dev release? My concern is that this might carry over to later releases, or, considering there is a flicker before the error occurs, I'm wondering if there is something simple I can use to fix this problem.

Finally, here is screenshot of what is happening in both Canary (left) and Chrome Stable (right) side-by-side: http://cl.ly/YFLu

Answer 1

This was a bug introduced while simplifying the Mac font back-end. This question is referenced in crbug.com/435822 , and the issue itself was fixed with crbug.com/421412 . I do not believe that this bug made it into a stable release (this time).

The issue was that '-webkit-font-smoothing:antialiased' was being ignored. For those who don't know, this is a Mac specific property which is used not to turn on and off subpixel rendering (as one would expect from the name), but to control the fake-bolding which CoreGraphics applies to subpixel anti-aliased glyphs. At larger sizes this fake-bolding is quite noticeable, so it is desirable to disable it on any non-body text. For more details one can read a thread on the www-style list "Text anti-aliasing on the Mac", particularly this post. The discussion there came about due to the last time this broke and made it to stable in Chrome 22.

Should this ever happen again (Mac only text seems too bold), one should open a Chromium bug and mention that '-webkit-font-smoothing:antialiased' seems to be on the fritz again.

Answer 2

Chrome (almost) always has font problems in Beta. Enter chrome://flags in the address bar and enable disable directwrite, restart the browser, Everything should look fine now.

BTW in my experience, these font problems are always fixed in the next stable release, most probably FB will also look.. Bolder.