Google I/O - Roboto Font (new version) font rendering issues in Chrome (windows)

Question

After listening to the latest Google I/O stream I was more than happy that they released a new version/update for their own font Roboto in their style guide.

• http://www.google.com/design/spec/style/typography.html#

! Note that this one is newer than the one in their webfont repo !

This is a screenshot of after(top) and before the update (bottom):

• http://img.konrad-abe.de/stackoverflow/screenshot-roboto-new_01.png

This is a live demo of the bold versions:

• http://demo.konrad-abe.de/stackoverflow/roboto-font-preview/

As I use Roboto in more than one project (web sites and web apps, both desktop and responsive) I was thrilled to implement it immediately. The preview was clean and well spaced and all but while testing, I had to find out, that the Google Chrome (latest stable) on Windows has problems rendering the bold and bold-italic versions of the font.

a's and e's have the inner space filled with color and the i's dots seem to merge with the shaft of the letter.

I'm using all versions via font-face:

/* ROBOTO REGULAR FONT
 * page main font
 * can be used with
 * - thin/100    ( + italic)
 * - regular/400 ( + italic)
 * - bold/700    ( + italic)
 */
/* ROBOTO regular / 400 */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-regular.eot');
    src: url('/includes/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-regular.woff') format('woff'),
    url('/includes/fonts/roboto-regular.ttf') format('truetype'),
    url('/includes/fonts/roboto-regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* ROBOTO regular / 400 + italic */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-italic.eot');
    src: url('/includes/fonts/roboto-italic.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-italic.woff') format('woff'),
    url('/includes/fonts/roboto-italic.ttf') format('truetype'),
    url('/includes/fonts/roboto-italic.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: italic;
}
/* ROBOTO bold / 700 */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-bold.eot');
    src: url('/includes/fonts/roboto-bold.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-bold.woff') format('woff'),
    url('/includes/fonts/roboto-bold.ttf') format('truetype'),
    url('/includes/fonts/roboto-bold.svg#Roboto-Regular') format('svg');
    font-weight: bold;
    font-style: normal;
}
/* ROBOTO bold / 700 + italic */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-bolditalic.eot');
    src: url('/includes/fonts/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-bolditalic.woff') format('woff'),
    url('/includes/fonts/roboto-bolditalic.ttf') format('truetype'),
    url('/includes/fonts/roboto-bolditalic.svg#Roboto-Regular') format('svg');
    font-weight: bold;
    font-style: italic;
}
/* ROBOTO thin / 100 */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-thin.eot');
    src: url('/includes/fonts/roboto-thin.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-thin.woff') format('woff'),
    url('/includes/fonts/roboto-thin.ttf') format('truetype'),
    url('/includes/fonts/roboto-thin.svg#Roboto-Regular') format('svg');
    font-weight: 100;
    font-style: normal;
}
/* ROBOTO thin / 100 + italic */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-thinitalic.eot');
    src: url('/includes/fonts/roboto-thinitalic.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-thinitalic.woff') format('woff'),
    url('/includes/fonts/roboto-thinitalic.ttf') format('truetype'),
    url('/includes/fonts/roboto-thinitalic.svg#Roboto-Regular') format('svg');
    font-weight: 100;
    font-style: italic;
}

The other font files seem to render correct and this one does so as well on Mac/Chrome but Win/Chrome has problems rendering Roboto bold and Roboto bolditalic for font sizes between 13px and 16px for a's and e's and between 10px and 14px for the i's.

I "fixed" it by using the .woff files of the old roboto version for bold and bolditalic but that's hardly a fix, I'd call it a dirty workaround...

Any ideas?

Solution 1

If Roboto font is appearing distorted or narrower or whatever unexpected. Its because you have a version of the font in this case Roboto installed on your PC. Go to Control panel > Fonts and remove the roboto font installed on your system and happy you go. What is surprising however is the inability of Chrome to use the font from the web server and pick from the local system. Where as Edge and IE all use the font information from where its supposed to be used that being the web server.

Solution 2

The problem comes up after you install the font (Roboto in this case) is in your windows Fonts directory. I solved removing the file.

Go to "X:\Windows\Fonts" where X is your drive where is installed windows select and remove Roboto.

Done. Enjoy it :)

Solution 3

If you have the latest version (v35 today) you can enable DirectWrite, which solved this issue for me. Just enter chrome://flags in the address bar, locate the Enable DirectWrite setting and click on Enable.

Source: http://www.tekrevue.com/tip/chrome-font-rendering-windows/

Comments

[All Bits Equal]

As much as I appreciate your advice and help, my problem as a web developer is not how my browser displays the font but how my clients', customers' and visitors' browsers display the font. Unless there is a solution, that I can use server-side, I have to keep looking. Thanks anyway for the feedback, I'll look into that as well.

[eeVoskos]

I understand. It's a known issue though, and despite being an experimental feature, DirectWrite is supposed to be enabled by default in future versions, which would hopefully solve your problem. Good luck in the meanwhile.

[All Bits Equal]

Ok, good to know, thanks alot. I'll upvote but leave the correct answer open for now.

[user2033412]

DirectWrite will be enabled by default in the next version of Chrome.

[Marcel Burkhard]

DirectWrite is now enabled by default from Version 37 and up.