Strange word length when using font in Chrome

Question

I have a very strange problem that sometimes happens when viewing a site in Chrome. You can see the problem happening in the image below:

There seems to be a CSS overflow / word / word-translation issue, but that is definitely not the case. I know this because if I change the font to a standard font, for example Helvetica in the Chrome dev console, it is sorted and returned to its normal state, as shown below:

If I get it back to the font type, then everything will be fine! This is a very strange problem. This only happens occasionally, and I have not seen this happen in any browser other than Chrome. Chrome seems to be trying to calculate the length of words using a font or something like that. This happens for every element on the page, and not just for paragraphs in the images above.

This is the CSS for the font:

@font-face {
    font-family: 'gotham_lightregular';
    src: url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.eot.txt');
    src: url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.eot.txt?#iefix') format('embedded-opentype'),
         url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.svg.txt#gotham_lightregular') format('svg'),
         url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.ttf.txt') format('truetype'),
         url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.woff.txt') format('woff');
    font-weight: normal;
    font-style: normal;
}

EDIT

This is the site I'm working on. But I'm not sure if this will help, since there is currently no problem, it is hard to catch when this will happen.

Answer 1

I had the same problem and I found that it was related to this style block that I had in my css document:

* {
    /* optimize text for legibility */
    text-rendering: optimizeLegibility;
}

, css, jQuery:

$(function() {
    $("body").css("text-rendering", "optimizeLegibility");
});

, Chrome , optimizeLegibility DOM.