New to the community? Start here

Icon set (Meg) path comes from HTTP, and won't switch to HTTPS

There appears to be a URL constant that is declared to load the Icon Sets, which grabs the site URL, but is coming through as HTTP even though i’ve set the site URL as HTTPS under WordPress > Settings.

Can you provide me any advice on how to change this constant or suggest a work-around?

Here is a console message:

Mixed Content: The page at ‘https://bcbuddhistfestival.com/sponsorship/’ was loaded over HTTPS, but requested an insecure font ‘http://bcbuddhistfestival.com/wp-content/themes/uf-spirit/fonts/Meg.woff’. This request has been blocked; the content must be served over HTTPS.

Right now the site is under htauth so it’s not publicly accessible.

Thanks for any help –

Luyen

Tue, 31 Mar 2015 20:03:52
  • Luyen
    • WPMU DEV Initiate

    Thanks Michael for your quick reply – that particular plugin did not work, according to the author’s plugin page it only works for certain WordPress hooks such as the enqueue functions.

    Far as I can tell Upfront does not register the icon sets with WordPress hooks, but loads it asynchronously when the page loads, i’m not s100% sure you guys are the experts.

    Let me know if you have any other suggestions – even if it means disabling the icon sets.

    Thanks!

    Luyen

  • Michael Bissett
    • Recruit

    Hey @Luyen, thanks for your patience here! :slight_smile:

    Revisiting this earlier point:

    There appears to be a URL constant that is declared to load the Icon Sets, which grabs the site URL, but is coming through as HTTP even though i’ve set the site URL as HTTPS under WordPress > Settings.

    Is there a particular reason why you’re using HTTPS that way, instead of using a plugin like this?

    https://wordpress.org/plugins/wordpress-https/

    That’s one of the ways setting up a site to use SSL is usually handled (other ways would involve either .htaccess or server rewrite rules)

    In researching the matter further though, one thought comes to mind… inside of:

    /uf-spirit/settings.php

    Could you try changing the code on lines 194-203, so that instead of this:

    @font-face {
    
font-family: "Meg";
    
src:url("UPFRONT_THEME_BASE/fonts/Meg.eot");
    
src:url("UPFRONT_THEME_BASE/fonts/Meg.eot") format("embedded-opentype"),
    
url("UPFRONT_THEME_BASE/fonts/Meg.woff") format("woff"),
    
url("UPFRONT_THEME_BASE/fonts/Meg.ttf") format("truetype"),
    
url("UPFRONT_THEME_BASE/fonts/Meg.svg") format("svg");
    
font-weight: normal;
    
font-style: normal;
    
}

    To this:

    @font-face {
    
font-family: "Meg";
    
src:url(/"UPFRONT_THEME_BASE/fonts/Meg.eot");
    
src:url(/"UPFRONT_THEME_BASE/fonts/Meg.eot") format("embedded-opentype"),
    
url(/"UPFRONT_THEME_BASE/fonts/Meg.woff") format("woff"),
    
url(/"UPFRONT_THEME_BASE/fonts/Meg.ttf") format("truetype"),
    
url(/"UPFRONT_THEME_BASE/fonts/Meg.svg") format("svg");
    
font-weight: normal;
    
font-style: normal;
    
}

    And seeing if that helps at all? :slight_smile: (backing up the file beforehand is advised)

    Please advise,

    Michael

  • Luyen
    • WPMU DEV Initiate

    Hi Michael,

    I am using wordpress-https plugin, but it doesn’t switch the Meg icons for some reason. But you’re right, the paths to the icon sets are in the theme CSS itself, as well as other non-https items.

    It’s not ideal to hardcode the referrer like this, i should change the urls to a referrer agnostic // and see if that works.

    Thanks for your help, problem solved.

  • Michael Bissett
    • Recruit

    Hey @Luyen, my apologies for the delay here!

    Just to provide an update, you’re right, instead of going into that file I mentioned, you would actually want to delve into the global CSS code (inside of Theme Options -> add custom css rules), and change the code there from this:

    @font-face {
    
font-family: "Meg";
    
src:url("http://mysite.com/wp-content/themes/uf-spirit/fonts/Meg.eot");
    
src:url("http://mysite.com/wp-content/themes/uf-spirit/fonts/Meg.eot") format("embedded-opentype"),
    
url("http://mysite.com/wp-content/themes/uf-spirit/fonts/Meg.woff") format("woff"),
    
url("http://mysite.com/wp-content/themes/uf-spirit/fonts/Meg.ttf") format("truetype"),
    
url("http://mysite.com/wp-content/themes/uf-spirit/fonts/Meg.svg") format("svg");
    
font-weight: normal;
    
font-style: normal;
    
}

    To this:

    @font-face {
    
font-family: "Meg";
    
src:url("//mysite.com/wp-content/themes/uf-spirit/fonts/Meg.eot");
    
src:url("//mysite.com/wp-content/themes/uf-spirit/fonts/Meg.eot") format("embedded-opentype"),
    
url("//mysite.com/wp-content/themes/uf-spirit/fonts/Meg.woff") format("woff"),
    
url("//mysite.com/wp-content/themes/uf-spirit/fonts/Meg.ttf") format("truetype"),
    
url("//mysite.com/wp-content/themes/uf-spirit/fonts/Meg.svg") format("svg");
    
font-weight: normal;
    
font-style: normal;
    
}

    (replacing mysite.com with the domain for your site)

    I wasn’t able to test with the site being forced to https://, but I found it to work on my test site when it was set to http://. :slight_smile:

    Hope this helps!

    Kind Regards,

    Michael

  • Luyen
    • WPMU DEV Initiate

    Thanks Michael!

    That definitely takes care of it, as well as any other static assets that points to an absolute http url. Most people won’t run into this of course, i just happen to be running https for a few forms.

    Cheers!