Just been working on a bit of a refresh to the look of this site. It’s the first time I’ve worked on any web design in Windows 8, and I was having some strange problems with the way that webfonts were being rendered.
I’m using Chrome as my main browser in Windows 8. I also had the same problem using Internet Explorer.
The problem font was Roboto Ultra-Light (font-wight: 100) in smaller sizes. Lots of horizontal lines appear to be missing in size from 14px to 24px, and odd gaps appear in the font at 28px. At larger sizes the font renders very smoothly. I was using the following link in my HTML head:
<link href='http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic' rel='stylesheet' type='text/css'>
and the following CSS:
font-family: 'Roboto', sans-serif; font-weight: 100;
Oddly, I viewed the same page on my laptop (Ubuntu, also using Chrome) with no problems at all.
I also noticed that the same font was available over at Font Squirrel as a downloadable font-face kit. Moving my site to use this font instead results in much smoother rendering of the font, and no missing lines.
Has anybody else had any strange problems like this? I’m not sure if it’s the way Windows 8 renders the fonts, or a problem with the way the font is packaged by Google?