title: Google Chrome Font Rendering
body: <p>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.</p>
  
  <p>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 &amp; 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: <a href="http://codepen.io/idealbrandon/pen/EGlDa" rel="nofollow">http://codepen.io/idealbrandon/pen/EGlDa</a> </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;aside class="masthead"&gt;
      &lt;h1 class="h2"&gt;Advancing Drainage through J-DRain, Grid-Guard and TurfCore.&lt;/h1&gt;
      &lt;p class="h3"&gt;Sed consequat pretium dictum. Viva mus blandit, turpis sed es ultrices sollicitudin, risus seme finibus ipsum, in faucibus diam dolor vel felis.&lt;/p&gt;
    &lt;/aside&gt;
    &lt;main&gt;
      This is the main section
    &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SASS/SCSS</strong></p>
  
  <pre><code>// 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;
  
    &amp;.align-left {
      float: left;
      margin: 0 $baseline $baseline 0;
    }
  
    &amp;.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
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Finally, here is screenshot of what is happening in both Canary (left) and Chrome Stable (right) side-by-side: <a href="http://cl.ly/YFLu" rel="nofollow">http://cl.ly/YFLu</a></p>