We have a website which was running on http://
earlier. We moved the whole site to https://
. To prevent man in the middle attack we make everything https so chrome will not show "load unsafe script" in the right. I changed all my http link to https. I was using this code to load my google fonts
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&subset=latin,latin-ext" />
<link type="text/css" rel="stylesheet" href='https://fonts.googleapis.com/css?family=Montserrat:400,700' />
This code look fine to me and I click on the stylesheet and it's show me font files loaded through https. Now I seen in firefox dev tool
Blocked loading mixed active content “http://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2”
[Learn More]
Blocked loading mixed active content “http://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2”
[Learn More]
The learn more link goes to https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
The problem is I still get mixed content error when I have a https link on my website. Same way I am loading stylesheet using /abc.css
Since the site running under https the link will be fetch as https. Now when I import a font in
the css file like
@font-face{font-family:test;src:url(../fonts/test.eot?v=4.4.0)
The firefox show me warning that the font is loaded with http even it's https. the relative path of fonts come with error that it's mixed with unsecure content.
I check on chrome and there is no such error. It's only happen in Firefox. How I can sort out this error in firefox. The same fonts giving me exception in Edge that " HTTPS security is compromised by data:/font".
Did anyone have sort out this kind of error. Thanks