Home > HTML/CSS > SOLVED! Google web fonts not displaying on (some) macs

SOLVED! Google web fonts not displaying on (some) macs

August 24th, 2011

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!

Be Sociable, Share!

  1. September 4th, 2011 at 08:51 | #1

    Hah, this was frustrating the hell out of me. Thanks for the post!

  2. September 4th, 2011 at 08:53 | #2

    Hmm actually, this didn’t seem to do anything for me. Any other suggestions? :)

  3. admin
    September 4th, 2011 at 21:27 | #3

    @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.

  4. November 6th, 2011 at 04:40 | #4

    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

  5. admin
    November 7th, 2011 at 08:31 | #5

    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.

  6. Leviticus
    January 24th, 2012 at 08:58 | #6

    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”…

  7. Leviticus
    January 24th, 2012 at 08:59 | #7

    ^ your comments don’t allow html eh haha

  8. admin
    January 24th, 2012 at 13:16 | #8

    @Leviticus
    Whoops. Thanks for the heads up. It’s fixed now.

  9. June 20th, 2012 at 22:22 | #9

    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?..

  10. Cyle
    July 9th, 2012 at 15:53 | #10

    I could kiss you!

  11. xing lin
    July 11th, 2012 at 21:08 | #11

    i want to know whether ipad or iphone have this prablem ?

  12. admin
    July 12th, 2012 at 07:43 | #12

    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.

  13. Steve
    July 19th, 2012 at 09:02 | #13

    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.

  14. December 7th, 2012 at 10:00 | #14

    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!

  15. Loren
    February 8th, 2013 at 04:35 | #15

    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?

  16. James
    June 4th, 2013 at 14:51 | #16

    Worked perfectly, thanks! Damn thing drove me nuts…

  17. July 1st, 2013 at 02:50 | #17

    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.

  18. JimmyB
    February 11th, 2016 at 14:40 | #18

    this !important worked a charm – thanks :)

  19. April 18th, 2016 at 18:51 | #19

    This issue was killing me! I can’t believe it was that easy to fix! Thank you very much!!!!!

  20. April 20th, 2016 at 12:16 | #20

    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?

  21. Alex
    May 4th, 2016 at 12:03 | #21

    It’s doesn`t work(

  1. No trackbacks yet.

Top