Site logo

Archived topic

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

7 replies · Started by Alex on January 22, 2020

Viewing posts 1–8 of 8

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

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">

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

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....

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!

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.

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

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

Thanks!

This archived topic is closed to new replies.