Importing Google Web Fonts, LightSpeed Web Store & SSL

As I am sure you know, SSL is very sensitive. Every link href, script src and img src in the document must be HTTPS for the page to be delivered completely secure.

If not, the encryption is partial and you may receive warnings about it. Worse, your customers will see warnings about it and might leave your site before buying or registering. So it’s better to never to let this happen, if possible. Especially in a production site (live). Goes without saying, I guess.

Anyway my latest thing is using Google Web Fonts because although I worship, love and adore WP-Cufon and Cufon and usually use them whenever I can I can’t use Cufon site-wide. Well, I could but not in good conscience if I care about how long the page takes to load and all of that.

Most of my clients choose 1 Universally available font for their main Body font and a couple of Specialty fonts for titles,headings and menus, to dress things up a bit. But my latest client wanted a Specialty font for their main Body font and so I found 3 compatible fonts in Google Web Font’s library. I used the @import in my main stylesheet and thought everything was going rather well.
Until we had to start checking SSL and wouldn’t you know it it wasn’t kicking in all the way.
Something was not getting encrypted and I could not figure out what it was.

Like I do whenever this kind of thing happens I reverted the template back to a default Web store Template and SSL kicked in all the way. After I looked through my customized files I still couldn’t find anything off…

Then I checked my main stylesheet and at the top was:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Alice);
@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

AHA! I switched it to:

@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(https://fonts.googleapis.com/css?family=Alice);
@import url(https://fonts.googleapis.com/css?family=Kameron:400,700);

And SSL kicked in all the way. JOY.

So don’t be silly like me. If you import fonts like this make sure the url is https. Good thing Google has SSL up the wazoo so this is not a problem. Awesome.