Okay
  Public Ticket #1996986
google fonts not loading correctly on https
Closed

Comments

  • nattydredman started the conversation
    May 2, 2019 at 11:48pm

    Hi.  All google fonts rendering fine on http://tymammawr.co.uk.  If i use https://tymammawr.co.uk then default font is getting used not the one that displays fine using http://


    Please advise/fix. Thanks.

  •  234
    Elena replied
    May 3, 2019 at 9:17am

    Hi there,

    I can't see any font rendering issue over https, please see screenshots:

    8052645243.png
    4271738330.png

    If you still need assistance please re-open this ticket.

    Cheers, P. 

  • nattydredman replied
    May 3, 2019 at 10:00am

    Thanks Pasquale.

    If i request the http:// version i get the correct fonts (Headers/Subitltles=Lato and Body=Simonetta).

    When I request the https:// version i get what you are seeing in the screenshot as well.

    I.e. the correct fonts aren't rendering. 

    There are some fixes for this but it looks like the fonts are loaded/enqued in a non-standard way in Hemma so I'm a bit stuck.

    Cheers. Nathan

  • nattydredman replied
    May 3, 2019 at 10:02am

    Screenshot attached

  •  234
    Elena replied
    May 3, 2019 at 10:08am

    Sorry but I am not sure to understand. I've seen your screenshot, what's wrong with that? Simonetta font seems to be correctly rendering, isn't it?

  • nattydredman replied
    May 3, 2019 at 10:10am

    It is when i request http:// but not when I request Https://.  Like your screenshot where you requested https:// the incorrect font is rendering

    Googling shows that this is a known issue with wordpress in some instances.

    That help?

  •  234
    Elena replied
    May 3, 2019 at 10:14am

    I am not sure this is the issue. Would you mind to provide your WP credentials in a private response so I can have a look? Thanks

  •   nattydredman replied privately
  •  234
    Elena replied
    May 3, 2019 at 10:50am

    Again, fonts are loading over https, please see the screenshots below. Please give me some time to investigate the issue, I'll contact you soon. Thank you for your patience.

    3840481847.png
  •   nattydredman replied privately
  •  234
    Elena replied
    May 3, 2019 at 11:20am

    Hello again,

    You were right about https but it's not Hemma theme's fault. Typography is handled by Kirki plugin and it seems that, for some unknown reason, fonts have not been loading over https.


    1328658681.png

    I've just found a Github ticket from a user experiencing the sam issue as yours: https://github.com/aristath/kirki/issues/2134

    Plugin author is recommending to check: 

    1. wrong WP_CONTENT_URL defined in your wp-config.php
    2. Wrong URLs set-up in Dashboard > Settings > General
    3. perhaps multisite with a domain-mapping plugin which has the wrong domain protocol set-up for that site?

    If none of those advices fix the issue, I'd try with disabling all plugins to check if there is any kind of conflict. 

    I'll close this ticket for now but feel free to open it again anytime whether you're get to fix the issue or note.

    Cheers, P.

  • nattydredman replied
    May 3, 2019 at 2:06pm

    Thanks Pasquale. 

    1. WP_CONTENT_URL not defined sin wp-config.php
    2. General settings URLs set up correctly both using https://
    3. Not using multisite.

    Hmmmmmmm !!!!!!!

  •  234
    Elena replied
    May 3, 2019 at 2:08pm

    Did that fix it?

  • nattydredman replied
    May 3, 2019 at 2:40pm
    I've tried adding the WP_CONTENT_URL in to wp-config.
It makes no difference.
<style id="kirki-inline-styles">body,button,input,select,textarea{font-family:Lato, Helvetica, Arial, sans-serif;font-weight:400;}.author-box-title,.block-title,.entry-title,.hero-title,.main-navigation,.preloader-counter{font-family:Simonetta, "Comic Sans MS", cursive, sans-serif;font-weight:400;text-transform:none;}.block-subtitle,.hero-subtitle{font-family:Simonetta, "Comic Sans MS", cursive, sans-serif;font-weight:400;font-style:italic;text-transform:none;}.is-logo-image .site-header .site-title{background-image:url("https://tymammawr.co.uk/wp-content/uploads/2019/01/Ty-Mam-Mawr-Website-Header-Logo-360x60.png");width:360px;}.is-logo-image .site-header.is-hero-on .site-title{background-image:url("https://tymammawr.co.uk/wp-content/uploads/2019/01/Ty-Mam-Mawr-Website-Header-Logo-360x60.png");}img, .map-shortcode, .button, input, textarea, .is-block-frame:not(.page-template) .site-content, .is-block-frame .block, .is-block-frame .hero, .pswp__img{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.is-block-frame .site-footer{border-top-left-radius:5px;border-top-right-radius:5px;}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi){.is-logo-image .site-header .site-title{background-image:url("https://tymammawr.co.uk/wp-content/uploads/2019/01/Ty-Mam-Mawr-Website-Header-Logo-360x60.png");}.is-logo-image .site-header.is-hero-on .site-title{background-image:url("https://tymammawr.co.uk/wp-content/uploads/2019/01/Ty-Mam-Mawr-Website-Header-Logo-360x60.png");}}
@font-face{font-display:swap;font-family:'Lato';font-style:normal;font-weight:400;src:local('Lato Regular'), local('Lato-Regular'), url(http://tymammawr.co.uk/wp-content/uploads/2019/05/S6uyw4BMUTPHjxAwWA.woff) format('woff');}
@font-face{font-display:swap;font-family:'Simonetta';font-style:italic;font-weight:400;src:local('Simonetta Italic'), local('Simonetta-Italic'), url(https://tymammawr.co.uk/wp-content/uploads/2019/05/x3dkckHVYrCU5BU15c4xfsoPly0.woff) format('woff');}
@font-face{font-display:swap;font-family:'Simonetta';font-style:normal;font-weight:400;src:local('Simonetta Regular'), local('Simonetta-Regular'), url(https://tymammawr.co.uk/wp-content/uploads/2019/05/x3dickHVYrCU5BU15c4xdfoF-1.woff) format('woff');}</style>
Looks like something is definitely a bit weird in Kirki as for me now Lato is not loading (requested via http://) but Simonetta is loading (requested in Kirki code above via https://)
In chrome it all looks OK. WTF???
  • nattydredman replied
    May 3, 2019 at 2:58pm

    We need to get to the bottom this urgently please Pasquale. 

    The site is simply not rendering the correct fonts on multiple devices/different browsers. 

    That means that the site visitors are not seeing what we need them to see!

    Please advise fix ASAP. Thanks.

  •  234
    Elena replied
    May 3, 2019 at 5:09pm

    I am going to report this issue to Kirki author. In the meantime try using this workaround: open the functions.php file of your (active) child theme and paste:

    function hemma_fonts_fix() {
     wp_enqueue_style( 'hemma-google-fonts', 'http://fonts.googleapis.com/css?family=Lato|Simonetta', false ); 
    }
    add_action( 'wp_enqueue_scripts', 'hemma_fonts_fix' );

    That should work. Alternatively, you could import fonts via CSS. Open the style.css files of the child theme and paste:

    @import url('https://fonts.googleapis.com/css?family=Lato|Simonetta');

    Hope that helpedwink.png

  • nattydredman replied
    May 3, 2019 at 5:17pm

    Brilliant!! Thank you so much Pasquale. You are a star!

  •  234
    Elena replied
    May 3, 2019 at 5:18pm

    :)