Essential - Fontawesome & Google fonts not showing under https

Essential - Fontawesome & Google fonts not showing under https

by Harry Hat -
Number of replies: 7

Hi,

Everything in Essential works for me behind HTTP on my test site, but the moment I go to my production site which is secure (HTTPS), neither the Fontawesome icons nor Google fonts show up in the theme.

There is a similar discussion here:
https://moodle.org/mod/forum/discuss.php?d=246073
The solution presented there, however, involves changing the PHP code, which I cannot do over the short term, but I need to show Essential to a group of people this week, so I'm in a bit of a bind.

Is there a simple workaround? Obviously I've tried the "FontAwesome from CDN" setting to no avail.

Thanks in advance for any advice,
Harry

Average of ratings: -
In reply to Harry Hat

Re: Essential - Fontawesome & Google fonts not showing under https

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Harry,

Sorry, I don't think there is a simple workaround.  Changing the code or manually editing the CSS is the only option.  In this case a Custom CSS append of @font-face will not prevent errors.

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential - Fontawesome & Google fonts not showing under https

by David Scotson -

Would manually adding the CSS work in the short term though?

I think if you cut'n'pasted the code needed to load the necessary fonts into the Header HTML textbox in Moodle then it would work, but your website would still be making calls to files it can't reach, which obviously isn't ideal.

Try this and see what happens:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
Average of ratings: -
In reply to David Scotson

Re: Essential - Fontawesome & Google fonts not showing under https

by David Scotson -

And the setting for a Google Font would be (changing the name of the font, Roboto in this case, as needed):

<link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
Average of ratings: -
In reply to David Scotson

Re: Essential - Fontawesome & Google fonts not showing under https

by Harry Hat -

Hi David and Gareth,

Thank you very much for your comments.

I'm working in a very controlled environment and there is a long turn-around time for requests/suggestions, so I won't be able to comment on my success (or lack of it) immediately. But I will return here once I have any useful feedback.

Thanks again. I really appreciate it.

Harry

Average of ratings: -
In reply to David Scotson

Re: Essential - Fontawesome & Google fonts not showing under https

by Harry Hat -

Hi David,

Thank you again for your help.

I went through all occurrences of "HTTP" that seemed relevant to Google Fonts as well as FontAwesome (used by essential for icons, etc.) and changed all 'HTTP://' to '//'.

The theme now displays both FontAwsome elements and Google fonts under HTTPS. I've tried it in Firefox, IE, Safari, Opera & Chrome and all the external elements load.

I changed the occurrences in the following files since it seems to be the only places in which the external fonts are referenced:

- layout/includes/fonts.php
- lib.php

What I would like to know is whether this could possibly be a weak way of handling the issue. Can anyone foresee circumstances under which this simple solution will become a bad or even disastrous one?

I'd appreciate any feedback.

Regards,
Harry

Average of ratings: -
In reply to Harry Hat

Re: Essential - Fontawesome & Google fonts not showing under https

by David Scotson -
That's the correct way of doing it, so you should be fine.
Average of ratings: -
In reply to David Scotson

Re: Essential - Fontawesome & Google fonts not showing under https

by Harry Hat -

Thank you David. Those are exactly the comforting words I needed to hear. I appreciate it.

Harry

Average of ratings: -