1 reply [Last post]
nikl
nikl's picture
Offline
newbie
germany
Last seen: 8 years 25 weeks ago
germany
Timezone: GMT+2
Joined: 2010-07-06
Posts: 2
Points: 3

Hello!

I want to replace the headline images on my shop site with the actual font. For this, I want to use @font-face. This is working fine, as long as I don't use secure urls, if I do (and I need to do so on some pages, like user account or checkout), everything gets a little odd.

If I include the fonts with relative urls, as created by online webfont kit creators like this,

@font-face {
	font-family: 'XYZ';
	src: url('../XYZ-webfont.eot');
	src: local('XYZ'), url('../XYZ-webfont.woff') format('woff'), url('../XYZ-webfont.ttf') format('truetype'), url('../XYZ-webfont.svg#webfontkvuHFOIa') format('svg');
	font-weight: normal;
	font-style: normal;
}

the fonts won't display on the secure pages, yet I will also get the message, that some elements on this page aren't secure. I have found out, that this is because, as soon as I include the font, some background images (and it seems this selection is random) aren't fetched via the secure url anymore. If I remove the font, all background images are fetched via the secure url on secure pages and the message disappears.

I can get the font to work on secure pages by including absolute urls for both http:// and https:// for the font, but the message along with the strange behavior of fetching some images via the secure, some via the unsecure url, doesn't change.

Why is this causing problems? All my images are included with relative urls and all are fetched correctly via the secure url on secure pages or unsecure url on unsecure pages - why won't this work for fonts? I have included them in the same folder where my images lay and they should be accessible with both urls.

Any help would be highly appreciated! I don't want to switch to an image replacement method or back to plain images..

nikl
nikl's picture
Offline
newbie
germany
Last seen: 8 years 25 weeks ago
germany
Timezone: GMT+2
Joined: 2010-07-06
Posts: 2
Points: 3

Fixed it, this was caused by

Fixed it, this was caused by css merging enabled in my shop software (magento)