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

Answer 1

As automaticoo stated, it is a known issue with Chrome. However, you can workaround the issue with a technique mentioned in the selected answer for this post: Google Webfonts Render Choppy in Chrome on Windows.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    font-family: Arial; /* standard font */
  }
}

That way you can use whatever font you want for browsers that still work, and replace it with a generic HTML font for Chrome.

Answer 2

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

Answer 3

So, I was actually looking for an answer for this, and I stumbled upon this question. I noticed this bug still exists today ( I just met it, such a happy meeting... ). Now I only found 1 solution, which is placing the svg font last in the @font-face declaration (this also means including all other formats). The only problem is that, when you for exampling try fixing the font rendering (to make it all smooth and stuff) you'd actually put the svg first. Here are some examples to demonstrate it

1: SVG font last, no crisp font, options are displayed right

@font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/OpenSans-Light-webfont.woff') format('woff'),
     url('../font/OpenSans-Light-webfont.ttf') format('truetype'),
     url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal; }

So as you can see, the options in the select box show just fine, but the font really isn't that crips, just look at "Register" (you might notice this better in comparison with my second example)

2: SVG font last, crisp font, stupid options in select

@font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'),
     url('../font/OpenSans-Light-webfont.woff') format('woff'),
     url('../font/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal; }

Now you will see that the font is a lot more crisp but the select is really stupid.

I suggest adding another font-face with the svg last just for select's. This will keep your fonts crisp throughout the website but display the options just fine.