Fix broken hosted fonts on https (SSL) and http pages

If you are hosting your own fonts and have an ecommerce store, you may have run across this issue:   your fonts are being served up using a standard http:// path, and then you go to your checkout page and your page will not load with a validated SSL certificate!  The lock or green does not show at the top of the browser window because you are loading nonsecure media on a page that needs to completely secure.  So you go into your files and tell your fonts to load via SSL, with an https:// path instead of http://.  Great! This should fix the issue!  Unfortunately, in some browsers this will not work. Some browsers will load the fonts via https:// on your nonsecure or http:// pages, and other browsers won’t load the font at all on your nonsecure pages.

How to get your hosted fonts to load on http:// and https:// pages across browsers

The thing is, you don’t have to specify.  You don’t need to tell the browser which stack to use, secure or nonsecure.

Go into your header file where you have specified the path to the fonts, and remove the http: or https:. Leave the // at the beginning of the path.

Voila, your browser will decide how to load the font on each page by itself!  So on a nonsecure or http page, the correct font will load, and then when you browse to the checkout page where you need all items to be loaded securely, your browser will load the font via https, or over SSL.

Now that you have that issue fixed, you have time to create more great content!!  Cheers!