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!
Glen Allsopp
Hah, this was frustrating the hell out of me. Thanks for the post!
Glen Allsopp
Hmm actually, this didn’t seem to do anything for me. Any other suggestions? 🙂
admin
@Glen Allsopp
Sorry, the !important hack worked for us. One of my coworkers found it by viewing the source code of the Google Web Fonts site. Find a font and click on the “Pop out” button underneath the example. View the source code of the pop out and you’ll see it. Check your syntax and make sure you don’t have a typo. Good luck. Let me know if you find something I’m missing.
Vika
Hi guys! thanks.
But i can see this problem not inly on mac’s, but also on Windows. Do you know if your solution fits also for Windows runner?
Thanks
Vika
admin
If the problem is on SOME windows machines, this may fix it. If you are not seeing your Google fonts at all, then it is probably a problem with your code. Let me know what you find.
Leviticus
Came across this as I’m experiencing a different problem with the G fonts (unfortunately this didnt help – some characters do not appear, some do… strange eh).
However, another possibility is that your element has 1 too many quote-marks.
So:
…Rokkitt””…
Should be:
…Rokkitt”…
Leviticus
^ your comments don’t allow html eh haha
admin
@Leviticus
Whoops. Thanks for the heads up. It’s fixed now.
Anthony
in my case, the fonts only appears on google chrome, while other browser don’t. Very strange, because it was working normal before. I’m using windows 7. What was missing?..
Cyle
I could kiss you!
xing lin
i want to know whether ipad or iphone have this prablem ?
admin
We mostly noticed this problem on Macs running OS 10.7 (lion). We didn’t notice the problem showing up on iDevices, but that was a year ago.
Steve
Having a similar issue now with a Lion Macbook where some GWFs show properly (ie. Lato) but not others (ie. Josefin Slab). Added the !important with no change.
Not a huge deal (that’s what the backups in the font-tree are for after all), but frustrating when the problem only effects some fonts.
kris
F’KING THANK YOU. Been looking for a solution for weeks. Webfonts have been ignored by all apple products I’ve tested on. I never really considered !important.
VERY !IMPORTANT POST!
Loren
Hmmmm. I’m trying to fix this for a Typepad blog. It shows fine on my mac but not on the iPad so I searched for a fix and found this.
I can’t add html within the core code but can add CSS. I tried the !important; tag but no success. I should mention, I’m a complete CSS novice. Any other ideas?
James
Worked perfectly, thanks! Damn thing drove me nuts…
KyleThu
THANK YOU, you’re the only one website i’ve found to answer to this question.
It works perfectly fine for me.
Problem occured on Mac only in EN language on a multi-boutique/language Prestashop website with Google Font “Lato” with @import.
Frustrating
Still doesn’t work, I’m banging my head to the desk!
Cathy
Hurray! Fonts work perfectly now. They had previously been displaying on all devices and browsers but suddenly stopped working for no apparent reason and everything defaulted to Arial – blah. The !important brought them back.
Thank you 🙂
Bartosz
Thank you! Simple solution and still works 🙂
JimmyB
this !important worked a charm – thanks 🙂
seanfrasure
This issue was killing me! I can’t believe it was that easy to fix! Thank you very much!!!!!
Jono
I am experiencing this problem in iOS – Google fonts are not rendering, but they do render elsewhere.
I am hosting the site I am testing on Dropbox, which I seem to recall being possible reason for fonts not rendering on iOS, from Dropbox/public folders.
I tried adding !important and I tried both “http” and “https” with no success. I though I had posted this problem elsewhere, but cannot find the post online.
Are you using Dropbox to test and experiencing this problem?
Alex
It’s doesn`t work(
Sikandar Aazam
@import not supported on MAC so please use
It is working nice
Sikandar Aazam
< link href=”https://fonts.googleapis.com/css?family=Courgette” rel=”stylesheet” >
Oleksiy
‘!important’ – that was the first thing I applied within seconds after I discover font problems…it doesn’t work. I have trouble on iPhone 4, iPad mini, iPad2, Safari for Windows …every apple product doesn’t see my font 🙁