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?

score 2 · Accepted Answer · answered Jan 04 '18 at 08:34

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.

score 1 · Answer 2 · answered Jul 07 '14 at 09:03

1

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/

answered Jul 07 '14 at 09:03

eeVoskos

501
2
5
16

2

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. – All Bits Equal Jul 07 '14 at 10:20
1

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. – eeVoskos Jul 08 '14 at 08:34
1

Ok, good to know, thanks alot. I'll upvote but leave the correct answer open for now. – All Bits Equal Jul 08 '14 at 10:02
DirectWrite will be enabled by default in the next version of Chrome. – user2033412 Jul 19 '14 at 13:08
DirectWrite is now enabled by default from Version 37 and up. – Marcel Burkhard Oct 20 '14 at 12:20

score 1 · Answer 3 · answered Nov 18 '15 at 10:49

1

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 :)

answered Nov 18 '15 at 10:49

marsaldev

3,338
2
16
27

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

3 Answers3

Linked