-
Hello GeneratePress People
Can you please assist? All the font on the site set to ‘bold’ randomly changes strength. Some stay the same, and others fluctuate between a lighter and, then suddenly, a darker bold. I cannot tell when or why; it is just shifting from light to dark from one moment to the next. Maybe on clicks?
I have gone through the formums and documentation and tried every option, but I cannot find the issue.
I have been through the topography settings, reviewed my CSS, and deactivated all the plugins…
I’m not sure if it is related to the uploaded font in the font library. Maybe I’ve done something weird I don’t understand. I followed the instructions and got the ‘wolf’ variation. It’s set to auto.
What am I missing?
Thank you very much for your help! In Advance…
-
Hi there,
Your screenshot doesn’t appear. Can you reattach it?
And can you let me know which specific text is having the problem?
-
Hello again…
The issue is on the whole site, body and header text.
When I open a page, it shows a lighter bold, then certain words shift to darker bold. If I open the page and navigate to another tab and then return to the page, the bold has darkened (or lightened). If I open the details block, then some of the text on the page darkens. It’s all dancing around, light to dark, dark to light. Anywhere that I have applied ‘bold’.
I’m sorry, but I’m not sure how to attach the screenshot. I’ll try again. If this doesn’t work, can you please tell me what I’m doing wrong? (I’m using the thumbnail for forums from PostImages)
-
I don’t see the section in your screenshot on the homepage, Can you link me to it?
-
Hello again
Thank you for your response.No Bold on the home page.
I’ll send links to the pages in question below.I have a Guntenberg ‘details’ block on each of these pages.
Click the arrow/block for it to open and view the details.A “bold highlight’ on the Book/Contact page also changes colour (above the ‘details’ block).
I checked again this morning, and the same thing is happening. The ‘Bold’ text on all these pages opens in a light bold, and then the text changes to darker. If I navigate away, changes back and forth, dark to light, light to dark.
Thank you for your time and assistance.
-
I think it’s not just the bold text; all of your text with custom fonts has the same issue.
It’s because the browser uses its default font to load the content first, then it loads the font file and applies the correct font to the text.
Do you want to change the behaviour so the font loads first, then the content? Just so you know, it might affect your performance score.
Let me know 🙂
-
Thank you for that. I’m not quite sure what it means…
So, it has to do with the custom font uploaded in the local font library?
I read that if I am using custom fonts, I should set it to auto and disable Google Fonts in the autoptimize plugin. Is that incorrect? When I open my site on my browser, I see the uploaded custom font immediately; it’s just the bold that seems to change once I start navigating.
Just a question so I can understand… Why don’t I see the default browser font load first?
I am not sure what I should do. If it affects all the font on my site (as all the font is custom), will people on other browsers see the default font first and then my font? That wouldn’t be great. If that is the case, then yes.What is your recommendation?
Thank you so much for your time 🤗
-
So, it has to do with the custom font uploaded in the local font library?
No, it happens on every site that is NOT using browser default fonts like Times New Roman, and depends on how fast the server and internet speed is, some may not be noticeable.
Why don’t I see the default browser font load first?
The site should already be cached on your machine.
This is what I see when I load your page initially.
https://app.screencast.com/yn8nrjR1fGcIPCan you go to customzier > typography, and change Google font-display?
Let me explain some more about
auto,blockand other options:With
block, the browser waits for the custom font to load before rendering text, ensuring that users see the intended typography rather than a fallback font.However, with
blockthe browser blocks text rendering until the font is downloaded, which can delay the time to first render. If the font file is large or the connection is slow, users might see blank spaces where text should be, leading to a poor experience. If the font fails to load (e.g., due to a network issue), the text could remain invisible for longer—up to a timeout period (typically 3 seconds in most browsers)—before falling back to a default font.With
auto, the browser uses its default behavior—usually showing a fallback font until the custom font loads (FOUT). This prioritizes speed over style, which might be preferable for usability but can disrupt design consistency.In short, block trades speed for style, ensuring the custom font is displayed at the cost of potentially slower rendering. If performance is a bigger concern, alternatives like swap (immediate fallback with a switch) or fallback (short block period) might strike a better balance.
-
Wow!
Thank you so much for that detailed explanation and the screen example.
I should have thought of checking… I haven’t seen the site on a machine other than Mac.
I completely understand now.I can also see from your example that the topography choices/sizes are affected when it loads default fonts. Because of my script font choice, I set a larger font size, so when it loads by default, it looks crazy big.
Basically, it would be a good idea to choose a fallback font, size appropriately, and try ‘switch’ or ‘fallback’ (FOUT)…
GeneratePress Support is the very best of the best…. I am self-taught through your documentation, forums and support topics. There are no words to adequately express the level of Gratitude.
I appreciate you.
-
mmmm….
Did I get that last reply wrong? Is the fallback font determined by the browser default font, or do I choose a fallback font? I seem to remember that before the font library update, it was necessary to use System-Stack to select a fallback font. Is that even necessary, considering the browser will default anyway?
Sorry to ask so many questions; I’m just a bit confused. I read the documentation but couldn’t understand the differences. (a bit like directions, some things just don’t compute… 🤪😂)
Your patience is valued.
-
Glad to hear that nice words, thank you 🙂
Is the fallback font determined by the browser default font, or do I choose a fallback font?
If you didn’t specify a fallback font, the browser will use its default font.
Is that even necessary, considering the browser will default anyway?
It’s not necessary, but you might want to manually choose a system font that looks closer to your custom font, so the font change can be minimized when it loads.
- You must be logged in to reply to this topic.