Custom fonts not displaying on chromebook but are in chrome on other computers

[Alex]

Hi team GP,

I’ve got two custom fonts installed on a site build which I followed the documentation to do – they display in the editor etc etc no problem.

As far as them displaying on the site, they do in both Chrome & Safari on desktop, tablet and mobile but when viewed on a chromebook (running chrome of course) the fallback displays and the main logo displays as broke too.

Any help gratefully received,

Alex

[David]

Hi there,

I am seeing a bunch of 404 errors in the developers console related to fonts and images – the URLs to the fonts and images are wrong eg.

https://yoursite.com/css/fonts/CustomFont.woff

Need to update your @font-face CSS with the correct URL.

I can’t see a problem with the logos output but there is an issue with your Video Poster HMTL in the header element ie.

<source src="URL/TO/video.webm" type="video/webm">

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Hi David,

Thanks for that, looking at the CSS I have the following –

    @font-face {
  font-family: 'DrukWide-Medium';
  src:  url('http://hotline-recordings.com/wp-content/uploads/2020/01/DrukWide-Medium.woff2') format('woff2'),
        url('http://hotline-recordings.com/wp-content/uploads/2020/01/DrukWide-Medium.woff') format('woff');
}

    @font-face {
  font-family: 'Space Mono';
  src:  url('http://hotline-recordings.com/wp-content/uploads/2020/01/SpaceMono-Regular.woff2') format('woff2'),
        url('http://hotline-recordings.com/wp-content/uploads/2020/01/SpaceMono-Regular.woff') format('woff');
}

Is that not as it should be?

Thanks,

Alex

[David]

Thats correct – maybe a caching issue but i as seeing:

https://yoursite.com/css/fonts/CustomFont.woff

Also seeing a bunch of HTTP warnings in the console as well….

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Hi David,

Got it I think, they were http links rather than https and I think the SSL was blocking them? Have added the ‘s’ to the end of the links and the fonts are displaying now.

I see though that the SVG logo in the header isn’t being served for the same reason – I’ve tried to re-upload the file but it still has an http link rather than https – is there any way around that?

thanks!

[Alex]

This is from the inspector –

Mixed Content: The page at 'https://hotline-recordings.com/' was loaded over HTTPS, but requested an insecure image 'http://hotline-recordings.com/wp-content/uploads/2020/01/Hotline-header-logo-desktop.svg'. This request has been blocked; the content must be served over HTTPS.

[David]

That ones coming from the Sticky Nav logo – you will need to re-enable it and add/remove the logo.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Hi David, just tried that but still no joy, any ideas?

Thanks!

[Author]

Posts