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!

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

  1. Thanks for posting this. Just wanted to let you know that the font rendering problem in Chrome is also with other types of web fonts, not just Google fonts, and it’s not restricted to headers. I’m also having a problem with navigation links that are not styled as headers. So, I’m experimenting with applying the text-rendering: auto declaration to the body class.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>