Archived topic
Custom fonts not displaying on chromebook but are in chrome on other computers
7 replies · Started by Alex on January 22, 2020
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!