In this article, I'm going to show you how to "fix" this but also illustrate why it happens and its purpose.
A little background first...
You might think that this font flicker is a bug. However, it's actually a feature that serves some purpose. The techie lingo for this is known as FOUT (flash of unstyled text).
A “flash of unstyled text” is the phenomenon in which a web page loads with the type set using system fonts before switching to the intended typeface(s). This delay is caused by the web fonts being downloaded to the user’s device. The effect can be prevented using the CSS font-display property but is not recommended because it hides the content, resulting in FOIT.
Simply put...
If anything a FOUT is good for performance (load time), the page displays quicker than if you simply hid it until the font loaded in.
However, from a UX standpoint, it kinda sucks.
Let's optimize for UX and fix this. Here's how...
This is going to take a few small code edits, but they are simple enough for you to take care of in a few minutes.
Step 1: Find and open your child theme folder
While logged into your HubSpot account, go to the Design Tools section and find your child theme folder in the left-side panel. It will look something like this.
Go ahead and open your child theme and then open up the templates // layouts folder. What you're looking for are the base.html and base-lp.html files. It's these two files that we'll be editing.
Step 2: Open the base.html file first and edit the <body> tag
This is the base file for all of your website pages and blog. So, the change you make here will have a global effect across all your website pages and blog.
You'll see the <body> tag. This is what we're going to edit first.
You'll want to edit this so it includes this:
<body style="visibility: hidden;">
For visual reference, it will look like this.
Step 3: Add in the required JavaScript code block
Right above the <body> tag you just edited you'll want to add this little snippet of JavaScript code.
<script>
// Helper function
let domReady = (cb) => {
document.readyState === 'interactive' || document.readyState === 'complete'
? cb()
: document.addEventListener('DOMContentLoaded', cb);
};
domReady(() => {
// Display body when DOM is loaded
document.body.style.visibility = 'visible';
});
</script>
When you've added it, it should look like this.
What this is doing...
Essentially, this little script looks for the moment the page is "loaded" and then switches the visibility property you added on the <body> tag from hidden to visible.
Go ahead and click the Publish Changes button to make this edit live.
Step 4: Test one of your live website pages
With that change made, go ahead and open up one of your website pages that is using the child theme you just edited.
There is a chance your website's code is cached in your browser, so you may still see the font flash before loading. This is how to solve that.
Add this to the end of the URL:
?hsCacheBuster=42
Example: https://www.helpfulhero.com?hsCacheBuster=42
If you plan on refreshing the same page a few times, just increase the number by 1. =43, =44, and so on. You can really start with any number. I just like 42. :)
Step 5: Repeat the process for the base-lp.html file
Now that you've ensured your website is working correctly, you can go ahead and open up the base-lp.html file and go through this same exact process. This will ensure that any time you use one of the CLEAN Landing Page templates you will eliminate this font flash issue.
Congrats, you're done! Nice work.