Tag Archives: HTML and CSS

WordPress and Google Fonts HTTP and HTTPS error messages and resolutions…

If you are trying to deal with the dreaded insecure messages when trying to use Google Fonts on WordPress based sites, here are a few things to try. Within the specific theme folder you are using, edit the functions.php file. You want to examine the file and search/look for “googleapis”.  That should help you find the correct area of the code. In my example site (below), notice how the url is referenced as “//fonts.googleapis.com” and not as “http://fonts…”.

Make sure your theme is using just “//fonts.googleapis…” and is not hard coded to HTTP or HTTPS

// Retrieve Font URL to register default Google Fonts
function courage_google_fonts_url() {
    
 $font_families = array('Lato', 'Fjalla One');
 $query_args = array(
  'family' => urlencode( implode( '|', $font_families ) ),
  'subset' => urlencode( 'latin,latin-ext' ),
 );
 $fonts_url = add_query_arg( $query_args, '//fonts.googleapis.com/css' );
    return apply_filters( 'courage_google_fonts_url', $fonts_url );
}

 

If you make these changes and this does not help, or if you cannot locate similar code in the functions file – and you’re still getting the SSL warning messages on your site, then you’re probably at the mercy of a specific plugin, or issue with your particular theme.

Try shifting the site to a basic theme like 2015 (for a few minutes for testing…) and see if the site works fine in http/https modes with the google fonts.  If it DOES, then the issue is your theme.  Contact the theme developer or look hard through the theme code and determine where the googleapis call is.

If the theme does not seem to be the issue, then it’s probably a plugin that’s causing your issues.  If you feel brave, disable the plugins and start testing one after another to try and localize which plugin is causing the issue.  (Disable all of them. Test the site.  See if the fonts work without issue.  Enable one plugin.  Test again, enable another plugin, more testing, etc.)

Hope that helps a bit!

How to use Google Fonts under both SSL and non-SSL without SSL insecure messages

The fix for this is very simple and will work under all the common browsers.  This has been tested on IE9, Firefox 13, Safari and Chrome.

locate this line on your HTML page (or template):

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

and change it to this:

<link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS).

Enjoy!