I'm encountering a "mixed content" error on my website caused by one font being loaded via HTTP.
The font is referenced in a CSS file like this:
@font-face {
font-family: 'fontXYZ';
src: url('../font/fontXYZ.eot');
src: url('../font/fontXYZ.eot#iefix') format('embedded-opentype'),
url('../font/fontXYZ.woff2') format('woff2'),
url('../font/fontXYZ.woff') format('woff'),
url('../font/fontXYZ.ttf') format('truetype'),
url('../font/fontXYZ.svg#fontXYZ') format('svg');
font-weight: normal;
font-style: normal;
}
When I bundle this CSS using webpack along with other stylesheets, the resulting CSS on my website appears as follows:
@font-face {
font-family: 'fontXYZ';
src: url(fontXYZ.eot);
src: url(fontXYZ.eot#iefix) format('embedded-opentype'),
url(fontXYZ.woff2) format('woff2'),
url(fontXYZ.woff) format('woff'),
url(fontXYZ.ttf) format('truetype'),
url(fontXYZ.svg#fontXYZ) format('svg');
font-weight: normal;
font-style: normal;
}
All suggested solutions recommend changing the URL to HTTPS or utilizing '//' instead of 'http://' but I am unsure how to implement this.