Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wordpress Mixed Content Error (google font related)

I've searched the forums, but I cannot figure out exactly how to fix the mixed content error on my site to make it https.

Here is the error from chrome:

Mixed Content: The page at https://www.example.com/ was loaded over HTTPS, but requested an insecure stylesheet http://fonts.googleapis.com/css?family=Oswald:300,400,700. This request has been blocked; the content must be served over HTTPS.

I am a complete noob, and don't know where/what to change.

Please provide noob direction, thanks in advance, a resolution will allow me to launch....thanks so much!

---updated----

It didn't work (probably because of me). This is where it is in the code in the functions.php file but it didn't work (i changed the http to https on the is ssl function)

$open_sans = _x( 'on', 'Open Sans font: on or off', 'Divi' );

    if ( 'off' !== $open_sans ) {
        $font_families = array();

        if ( 'off' !== $open_sans )
            $font_families[] = 'Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800';

        $protocol = is_ssl() ? 'https' : 'http';
        $query_args = array(
            'family' => implode( '%7C', $font_families ),
            'subset' => 'latin,latin-ext',
        );
        $fonts_url = add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" );
    }

    return $fonts_url;
}
endif;
like image 733
BizBrar Avatar asked Mar 12 '23 22:03

BizBrar


1 Answers

Find the link for 'http://fonts.googleapis.com/css?family=Oswald:300,400,700 in your theme's functions.php file or header.php and do one of two things:

1) add an s to http, and Google will serve the font via https

or

2), remove the http: to make the link protocol agnostic, i.e. //fonts.googleapis.com/css?family=Oswald:300,400,700 This is the best method for compatibility in all cases.

Either way, that will solve the mixed content errors.

But, still learn how to use developer tools - the most basic tools for any web development - to check all loaded resources and find any others that are loading non-https, such as image links, etc. Use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE.

like image 192
markratledge Avatar answered Mar 20 '23 00:03

markratledge