After listening to the last Google I / O stream, I was more than happy to have released a new version / update for my own Roboto font in my style guide.
! Please note that this version is newer than the one in their webfont repo!
This is a screenshot after (above) and before updating (below):
This is a live demo of bold versions:
Since I use Roboto in several projects (websites and web applications, both desktop and responsive), I was delighted with its implementation. The preview was clean and well-spaced, and during testing I had to find out that Google Chrome (the latest stable version) on Windows had problems displaying bold and bold typeface fonts.
a and e have an inner space filled with color, and the points i seem to merge with the letter shaft.
I use all versions via font-face:
@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;
}
@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;
}
@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;
}
@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;
}
@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;
}
@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;
}
Other font files seem to be correct, and this one also does this on Mac / Chrome, but Win / Chrome has problems rendering Roboto bold and Roboto bolditalic for font sizes between 13px and 16px for a and e and between 10px and 14px for i.
"" , .woff roboto bolditalic, , ...
?