CODEWITHSUNDEEP
htmlwordpresshttphttps
ifh
ifh

Reputation: 311

Page loaded over HTTPS, but requested an insecure font — but all links are HTTPS

I have a WP site that loads some custom fonts from a directory on the same page. There hasn't been any problems with it up intil now. I suspect it may be some plugin that did something to the .htaccess.

Mixed Content: The page at 'https://www.mypage.net/' was loaded over HTTPS, but requested an insecure font 'http://www.mypage.net/'. This request has been blocked; the content must be served over HTTPS.

Normally you easily fix this by adding s at the end of HTTP, but all the links are HTTPS — yet it says it isn't. I checked the <link> to the font stylesheet. I then checked the stylesheet and all links are HTTPS and absolute path.

The page forces HTTPS redirect, and in the settings of the WP the page is defined to have an URL with HTTPS.

Upvotes: 5

Views: 9677

Answers (2)

ifh
ifh

Reputation: 311

UPDATE: Managed to finally solve it after a lot of testing and tinkering.

First; my fonts folder had a .htaccess rule to prevent downloading (license demanded it) from any other origin than the site itself. One of the RewriteRule had HTTP instead of HTTPS:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mypage\.net/ [NC]
RewriteCond %{REQUEST_URI} !hotlink\.(ttf|otf|woff|woff2|eot) [NC]
RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in.*$ [NC]
RewriteRule .*\.(ttf|otf|woff|woff2|eot)$ http://www.mypage.net/ [NC]
                                          ^^^^^

I fixed that to HTTPS and then it changed to a different error:

Failed to decode downloaded font: https://mypage.net/fonts/font.woff OTS parsing error: invalid version tag

To fix this I had to make sure my fonts had deep font support, which it had, and then I read somewhere that it could be solved by adding version to the link (?v=x), e.g.:

src: url('https://mypage.net/fonts/font.woff?v=1') format('woff');

This worked on .woff, .woff2 and .eot, but not .ttf for some reason. Adding version extension on .ttf would give me 404. I actually also at one point encountered that it plain gave me 404 without the extension. I went out on a limb and moved the src: url('…'); containing the .ttf from the bottom to the top and that solved both errors somehow.

At this point it didn't give me errors, but now it simply didn't load the font. It changed to the fallback. After random searching I found that the custom fonts uploaded via plugin (ProPhoto6 — they only allow X amount of uploaded custom fonts, which is dumb) had a different read/write permission. I changed the permissions to the value that all the fonts I use had (fonts uploaded by ProPhoto and was being used); 0666 (had 0644). That finally made it load without errors.

Upvotes: 5

Jesse
Jesse

Reputation: 39

you can try to add a plugin called Really simple ssl to check if that solves your problem

Upvotes: 0

Related Questions