Google web fonts are great. If you don’t know about them, you really need to check them out. They enable you to embed non-standard fonts into your website …and you don’t have to worry about any font licensing issues. But, we recently ran into a problem at work with Google web fonts – they weren’t displaying correctly on some Macs and Apple products. The really frustrating thing is that they worked fine on most Macs, but on some machines they didn’t work at all, no matter which browser we used. The fonts worked correctly on the Google web fonts site, but not when we used the Google code samples on our own sites.
One of my coworkers dug into the issue and found an undocumented solution. Simply add the !important hack to the font-face declarations in your CSS wherever you specify a Google font. Problem solved! Here’s a quick example:
<head>
...some meta tags and junk here...
<link href="http://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet" type="text/css"></link>
<style="text/css">
...some styles...
h1 {
font-family: 'Rokkitt', serif !important;
}
...some more styles...
</style>
...more junk here maybe...
</head>
We never did figure out what is causing the issue, or why it only occurs on some Macs. Ultimately, though, we don’t care why it happens, as long as we can fix it. Anyway, since this bug is undocumented as far as I can tell, I thought I’d share this simple hack that fixes it. Thanks to my coworkers at Toolbox No.9 for solving the problem!