Google Webfonts Not Rendering in Chrome for Windows in Headers with Bootstrap Styling

Wow, it’s been awhile since I last posted about…ANYTHING. Anyways, had to resolve an issue last night with Google webfonts not rendering in the Chrome browser on Windows (ironic…). There’s tons of complaints about ugly rendering in Chrome but for me the font was rendering at all even though on Google’s Webfonts page it was fine.

After some finicking and comparing around, I discovered it was actually an issue related to how Twitter Bootstrap styles headers (h1, h2, etc, not the element). They specify the following CSS rule:

text-rendering: optimizelegibility;

For whatever reason, this causes the webfont not to render at all (again, only in Chrome on Windows). Change the value to auto or optimizespeed to get them to show up.

text-rendering: optimizespeed; /* or auto */

Didn’t find anyone else having this issue from my searching, so I thought I’d post it here and hopefully it helps other people who come across it!