Google Chrome Font Rendering

I am facing an issue with basic font rendering in Google Chrome Canary. I am embedding the "Proxima Nova" font on a site I am developing with Typekit. This is currently only done locally, so I must do my best to show the problem with screenshots and code samples.

In short, anytime I use any webfont, in Google Chrome Canary (currently 40.0.2202.3), my fonts are too heavy. In short, less than a second after the page loads, the font is rendered at the correct thickness, and then it will fatten up within a second from the browser load. I tried to disable all plugins and the problem still exists. When I disable CSS on the page, it renders other browsers consistently (as I would expect). Fonts render correctly in Chrome 38 and 39, as well as all other major browsers. I tested on both Windows and Mac OS with the same results. I created some code to demonstrate this, which has the exact HTML and CSS 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. Does anyone have a key? Or I just don't have to worry about it since its the only release? I am worried that this might carry over to later versions, or given that there is flickering before the error, I am wondering if there is something simple to fix this problem.

Finally, here's a screenshot of what's going on in both Canary (left) and Chrome Stable (right) side by side: http://cl.ly/YFLu