Archived topic
Font not displaying
5 replies · Started by Matt on April 25, 2022
On some browsers, my custom self-hosted font doesn't load.
I'm not sure if it's a CSS issue, or because I use ezoic's asset cleanup/speed stuff. I have always not used their "preload fonts" and "optimize fonts" options.
This is the issue in the picture. If I deselect that Inter box in firefox inspector, the font displays properly on the page
It only happens on some browsers, seems to be irrespective of adblocker or not.
One other thing to mention, is that when it does load, the font is seen to change on the page about a second after pageload. It happens on every pageload after, even if the font is in cache.
Hi Matt,
What's the font name you are trying to apply?
As when I inspect, if I deselect the Inter font, your site will be using the system default font:
https://www.screencast.com/t/bT0CcAuONR9d
Let me know!
It's Inter. So I expect Inter to load, but it doesn't and loads the standard browser default. If I deselect Inter, it loads Inter - i.e. the opposite of what is expected. What you are seeing is the expected, but it doesn't happen on my side on certain machines/browsers.
It's odd, I only see this on certain browsers or different computers. I do however see the reloading font on each page on most browsers.
Edit: On my side it looks to be loading the font inline, whereas on yours it's doing it from the index
Hi Matt,
I tried viewing your site as well on 3 different browsers(Google Chrome, Safari and Mozilla Firefox) and they all loaded the font as expected.
This is what I saw for all browsers: https://share.getcloudapp.com/qGu78xBZ
Can you try clearing your cache for the browsers not loading the font?
Moreover, index is the terminology for inline in Google Chrome.
With regards to the fonts loading late, though I can’t seem to replicate this issue on my end, this may be an effect of your server’s response time which appears to be an issue when testing your site: https://share.getcloudapp.com/DOu4yryR
This flag usually is related to the quality of the server. Normally, migrating to a higher-quality web server solves this. Disabling unused plugins may also help.
You may also check if this may be an outcome of how you’re optimizing your site by temporarily disabling settings that may affect the font.
Hope this clarifies and hope this helps. :)
Hi Fernando, thanks for jumping in.
I've cleared cache on the browsers I'm testing.
You are actually seeing the issue I described. In your screenshot, the font displayed isn't Inter, it's times new roman. Try finding the font in inspector in Firefox and deselecting Inter and you might see the same thing as I am, with the right font being loaded after deselecting. It looks like it's actually Segoe when inspecting in firefox.
https://imgur.com/UckZfEV
https://fonts.google.com/specimen/Inter?preview.text=We%20would%20also%20strongly%20suggest&preview.text_type=custom
Thanks for highlighting the server issue. It's all being served from cloudflare but does seem slow.
To make sure, does the issue exist with all other plugins disabled? Specifically, can you try #1 here starting with caching and optimization plugins?: https://docs.generatepress.com/article/debugging-tips/
It would be good to take a backup of your site before doing this.
Kindly let us know how it goes. :)
