I was working on a website and one day I enabled SSL for the same. After enabling it, I realized that the texts were looking weird. Texts were not it the font I was set to, it changed to the browser default. The website was made using WordPress Editor.

In some cases, not only the fonts but also some styling elements get reset. All such elements could be linked from outside the main website. That is files like CSS & Fonts.


ssl font fix

In my case, I came to know where the issue was lying. All the Google fonts were linked using the link provided by them. It was starting with http:// there was a need to change that URL with respect to the situation (ie, SSL status).


What you needed to do is replace all the http:// with //. By doing so, the request should use the correct protocol automatically.

Example (WordPress)

The below example shows how Google fonts were linked in WordPress (functions.php) by default.

function mytheme_enqueue_styles() {
wp_register_style(‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Copse’);
wp_enqueue_style( ‘googleFonts’);
}

I just replaced the URL to fix the issue.

function mytheme_enqueue_styles() {
wp_register_style(‘googleFonts’, ‘//fonts.googleapis.com/css?family=Copse’);
wp_enqueue_style( ‘googleFonts’);
}

For some cases, there may be many of those linking code lines. So it becomes harder to change each one of them. If you are on WordPress, you don’t have to manually change the links. There is a free plugin available called SSL Insecure Content Fixer. Just install and activate, you will be good to go.

I hope this article helped you solving the website styling issues on SSL. If it didn’t work for you lemme know it so that I could help you out. Leave your comments and queries in the comment section below. Have a nice day 😉