Databases
StackOverflow2013
Postsdbo
POChrome svg-Font-Rendering breaks Layout
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChrome svg-Font-Rendering breaks Layout
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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