Search code examples
cssgoogle-chromegoogle-drive-apiwebfonts

Google Web Font wont display in Chrome, when hosted on Google Drive


I am having an odd web font issue. I am using a google web font, and everything looks fine when I view from local host. I even have MAMP running on my laptop, so I can see how it should look from an actual server. Again, everything looks fine. But once I upload the file to Google Drive so I can share the file, the font stops displaying in Chrome. It works in Safari, Firefox, iOS Safari, and even iOS Chrome, but it does not work in Chrome on my laptop.

OS: Mac OS X 10.8.4
Chrome: 31.0.1650.63 - works from local, does not work from Google Drive
Safari: 6.0.5 - works fine from both local and Google Drive
Firefox:5.0.1 - works fine from both local and Google Drive
iOS Safari - works fine from both local and Google Drive
iOS Chrome - works fine from both local and Google Drive

page in question: https://googledrive.com/host/0B0LF26cYLcG7ZThfUGF5TFE1eUE/index.html


Solution

  • Your app in google drive under HTTPS, but you try to load fonts from HTTP just change http to https when you load fonts in font-face directive

    [blocked] The page at 'https://googledrive.com/host/0B0LF26cYLcG7ZThfUGF5TFE1eUE/index.html' was loaded over HTTPS, but ran insecure content from 'http://fonts.googleapis.com/css?family=Exo+2:400,400italic,700': this content should also be loaded over HTTPS.
    

    And you need to learn how to use devtools in chrome. it will help you in the future.