title: Chrome svg-Font-Rendering breaks Layout
body: <p>I'm currently working on a little Project in which I'd like to use webfonts <strong>via @fontface</strong>.</p>
  
  <p>I implemented the font's like this:</p>
  
  <pre><code>@font-face {
      font-family: 'CardoRegular';
      src: url('../fonts/Cardo104s-webfont.eot');
      src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Cardo104s-webfont.woff') format('woff'),
           url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
           url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
      font-weight: normal;
      font-style: normal;
  </code></pre>
  
  <p>Now as you have probably experienced Chrome has problems displaying these fonts <strong>in a smooth way.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/GSs40.jpg" alt="Chrome font rendering problems"></p>
  
  <p>After some searching I found a solution which seem to work: You simply move this part of the css:</p>
  
  <pre><code>    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
  </code></pre>
  
  <p>So you end up with this:</p>
  
  <pre><code>@font-face {
      font-family: 'CardoRegular';
      src: url('../fonts/Cardo104s-webfont.eot');
      src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
           url('../fonts/Cardo104s-webfont.woff') format('woff'),
           url('../fonts/Cardo104s-webfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  </code></pre>
  
  <p>Now Chrome renders the Fonts in a smooth way, which is great.</p>
  
  <p><strong>BUT:</strong></p>
  
  <p>For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/gUWnV.jpg" alt="Chrome Font problems"></p>
  
  <p>Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.</p>
  
  <p>**Has anyone experienced this problem before?</p>
  
  <p>I would be happy to get advice on this.**</p>
  
  <p>Feel free to take a look for yourself:
  <a href="http://www.fireflycovers.com" rel="noreferrer">View Fireflycovers.com online</a></p>
  
  <p>Thanks a lot!</p>