Question

Edit:

Chrome is somehow rendering the fonts i use via @font-face incorrectly. Which i found as i changed the font family of the inspected element to arial. The reason this might be, is because as i was searching for a fix on how chrome renders fonts so they appear more smooth instead of pixelated, i found that you could swap the order of the font formats and put the svg on top which would cause chrome to render it perfectly. As seen here.

So either the order is messing them up, or simply the font is broken in some way.

Now the question is, how do i use this font without breaking the site and keeping the fonts smooth?

Here is the @font-face code i use:

@font-face {
    font-family: 'alegreya_scregular';
    src: url('../includes/fonts/alegreyasc-regular-webfont.eot');
    src: url('../includes/fonts/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('../includes/fonts/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg'),
         url('../includes/fonts/alegreyasc-regular-webfont.woff') format('woff'),
         url('../includes/fonts/alegreyasc-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'droid_sansregular';
    src: url('../includes/fonts/droidsans-webfont.eot');
    src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg'),
         url('../includes/fonts/droidsans-webfont.woff') format('woff'),
         url('../includes/fonts/droidsans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'droid_sansbold';
    src: url('../includes/fonts/droidsans-bold-webfont.eot');
    src: url('../includes/fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../includes/fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg'),
         url('../includes/fonts/droidsans-bold-webfont.woff') format('woff'),
         url('../includes/fonts/droidsans-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

---

I have some rendering issues on chrome. For some reason, the links right side gets cut off so the underlines will only fill half the of text, and the divs on the right side will not break off the words to a new line. It only happens some of the time and if i refresh the page a couple of times (differs how many times) it will fix itself eventually. Images are below.

Note: The site is in danish.

Images, underlined the issues in red:

https://i.stack.imgur.com/zJHXD.jpg

What causes this, and how do i fix it?

---

Note: This is for the navigation links

HTML:

<ul class="nav">
    <li class="first"></li>
    <li><a href="forside.html">Forside</a></li>
    <li><a href="booking.html">Booking</a></li>
    <li><a href="galleri.html">Galleri</a></li>
    <li><a href="begivenheder.html">Begivenheder</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="politik.html">Politik</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
</ul>

CSS:

.header .nav {
    position: absolute;
    overflow: hidden;
    font-size: .70em;
    bottom: -8px;
    right: 16px;
}
.header .nav li {
    float: left;
    background: #171717 url(../images/site/nav_divider.png) repeat-y right;
    text-transform: uppercase;
} .header .nav li:hover {
    background: #1a1a1a url(../images/site/nav_divider.png) repeat-y right;
}

.header .nav .first {
    width:2px;
    height:31px;
    margin-bottom:-0.95em;
}

.header .nav li a {
    display: block;
    padding: .75em .85em .75em .75em;
    color: #e0e0e0;
    text-decoration: none;
}

Answer 1

After a bit of searching on @font-face and chrome behaviour, i found a solution to the problem. Apparently moving the svg to the top will make the rendered font break the layout, so instead you should keep the original formatting and add a special media query, which will render the font smoothly in chrome while not breaking the layout.

Example:

@font-face {
    font-family: 'droid_sansregular';
    src: url('../includes/fonts/droidsans-webfont.eot');
    src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../includes/fonts/droidsans-webfont.woff') format('woff'),
         url('../includes/fonts/droidsans-webfont.ttf') format('truetype'),
         url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'droid_sansregular';
        src: url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}