Alex Rivera | Logout

Google web fonts and SSL error

Asked 2012-07-28T21:22:38.717
19

My site is working well with Google webfonts UNTIL the user hits the SSL portion of the site.

At that point, chrome throws the partial encoding error, and my cufon menu losses it's kerning.

I'm including my webfont with this css:

@font-face {
src: local('Lusitana'), url(https://themes.googleusercontent.com/static/fonts/lusitana
/v1/tAIvAkRzqMJf8Y4fM1R7PXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}

My js console then gives me this error:

[blocked] The page at https://domain.com/ecommerce.php ran insecure content from http://fonts.googleapis.com/css?family=Lusitana:regular,700&subset=latin.

Any ideas how I can get google fonts to force SSL?

ssl webfonts
Edit
Report

1 Answer

3

To load google fonts that will work in non-secure, and SSL mode, try the following in your page header - (and remove what you've got there calling a https:// inside the CSS):

<script type="text/javascript">
  WebFontConfig = { google: { families: [ 'Droid+Serif::latin' ] } };
  (function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
</script>

In my example, I'm using Droid Serif font, so swap that with yours.

You can read more on this here.

answered 2013-04-10T09:13:27.927

Your Answer