Load css depending depending on protocol of page

Question

I have 2 @font-face in the same css file

@font-face {
    /* code for https://site.con */
    }
@font-face {
        /* code for http://site.con */
    }

and i need load only the first @font-face when the site is https, and the only the second when the site is http.

Is it possible? with js/jquery or another method?

Answer 1

You can do it with javascript/jquery, solution steps:

1. check if the site is https or not.

if (location.protocol != 'https:')
{
//http font
} else {
//https font
}

2. load the correct font.

$("head").prepend("<style type=\"text/css\">" + 
                                "@font-face {\n" +
                                    "\tfont-family: \"myFont\";\n" + 
                                    "\tsrc: local('☺'), url('myFont.otf') format('opentype');\n" + 
                                "}\n" + 
                                    "\tp.myClass {\n" + 
                                    "\tfont-family: myFont !important;\n" + 
                                "}\n" + 
                            "</style>");