Search code examples
cssfontsshopwareshopware6shopware6-app

font loading in app results in an mixed content error and the font then gets blocked

it all works fine with the font in our test environment with sw 6.4.13 up to 6.4.16.1

in the cloud app test environment from shopware we get the following error:

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure font ''. This request has been blocked; the content must be served over HTTPS. awesomebestappever-xyz.sw-testenvironment.de/:1

Mixed Content: The page at 'https://awesomebestappever-xyz.sw-testenvironment.de/shop/public/' was loaded over HTTPS, but requested an insecure font 'http://awesomebestappever-xyz.sw-testenvironment.de/shop/public/'. This request has been blocked; the content must be served over HTTPS.

the font is located in appname/Resources/public/fontname/ is then loaded in the related scss file in Resources/app/storefront/src/scss/fonts/fontname.scss while importing it inside the base.scss

the inclusion follows the pattern:

@font-face {
font-family: 'fontname';
font-style: normal;
font-weight: 400;
src: url('/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.svg#Caveat') format('svg'); /* Legacy iOS */ }

now I can't really see the problem with why it tries to load the font insecure. Is there anything I can do to force it to use HTTPS?

I also see in the network tab, that it loads the font like: https://awesomebestappever-xyz.sw-testenvironment.de/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.woff2

but in the test environment it should be: https://awesomebestappever-xyz.sw-testenvironment.de/shop/public/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.woff2

is this a mistake from my side or is something getting wrong from shopware side in the cloud app environment, maybe in sw 6.4.17?

Solution

  • Try using the $sw-asset-theme-url variable which should give you an absolute URL

    src: url('#{$sw-asset-theme-url}/bundles/awesomebestappever/fontname/fontname-v17-latin-regular.eot');