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

Are you stressed out looking for an answer to this issue?

Below is the answer which was written a few years ago.  But if you are having one of those days, first take a minute and either watch this super motivational video that I have personally listened to I think over 100 times:

Or Take a minute and watch this unbelievable, shocking, hysterical, amazing video:

The Problem:

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 https:// 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 https://.  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 https:// pages, and other browsers won’t load the font at all on your nonsecure pages.

How to get your hosted fonts to load on https:// 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!

Read More in this Category:

Hungry for More Information?

Contact us to find out how we can leapfrog your online presence to where you want to be!

Set up a 15 minute call today using the button below, or fill out the form here!

Find Out How TechCare Can Help You