Chrome SVG webfonts weird characters in select input

Question

Chrome 26.0.1410.64m on Windows 8 has problems rendering WebFonts. It is a known problem and a solution is to first serve the svg version of the font instead of the woff version. It fixes the anti-aliasing and makes font look pretty again.

The downside of this method is the weird rendering inside the element inside select inputs.

I added a jsfiddle to see it in action : http://jsfiddle.net/4mSpv/6/.

The CSS is as simple as it can be.

@font-face {
    font-family: 'Montserrat';
    src: url('https://raw.github.com/louh/website/master/fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: 400;
    font-style: normal;
}
select {
    font-family: 'Montserrat', sans-serif;
}

I remove the local installation of a font and noticed an other windows 7 computer doing the same. Anyone knows what is going on with chrome? (IE, Firefox, Safari all render fine)

PS: Other browser fonts not included in JSFiddle to filter out the problem and each browser have their own quirks (not allowing font-size etc) but render the text fine

Answer 1

There is no way to solve this problem.

This is NOT a Regression issue and is existing from M24.

I submitted a bug report and it Weird character rendering in option menu