So, this is called FOUT (Flash Of Unstyled Text), and itâs there on almost any website you visit if you refresh enough times
Itâs not incorrect, itâs just reflective of how long it takes for even the fastest websites to grab the font file and style it for you.
I canât guarantee a response from your client, but this nifty hack worked for me thanks to the Custom Code area and actually makes a slick little animation that looks super intentional.
Let me know if it works for you?
In Site Settings > Custom Code > Body Start, drop the following snippet:
<style>
body {
opacity: 0;
transition: all 1000ms 0ms linear;
background: (match whatever your main site background color is)
}
body:has(.dh-body) {
opacity: 1;
}
</style>
What this does is hijack the way Divhunt loads sites. They first load a basic wireframe of just:
<!DOCTYPE html>
<html lang="en">
<head>
// all of your styles and scripts get loaded here, including your CSS and fonts. However, Divhunt is SO fast that it loads everything simultaneously. So while it's going and getting those fonts, it's still loading in the rest of your content at the same time. Usually the content gets there first (unless the CSS is cached), so that's why you see the unstyled text first.
</head>
<body>
<style>
// THIS is where that custom code goes, because it loads with the page itself
body {
opacity: 0;
transition: all 1000ms 0ms linear;
background: rgba(64,77,166,1.00);
}
body:has(.dh-body) {
opacity: 1;
}
</style>
<window id="dh-window"></window>
<div id="dh-website">
// your content will be dropped into this element via the script below
</div>
<div id="dh-modal"></div>
<script id="divhunt-load">
// this is where all your CONTENT is dynamically loaded via script
</script>
</body>
</html>
So it gets that opacity on the body itself, as well as the background, so thereâs something to look at when it first loads. If you published a blank page, thatâs what it would look like, basically.
Then when the script brings in elements, your main content will be nested under .dh-body
, so once the CSS clarifies that the body insert exists, it will use that transition property to bring the opacity back to 1!
So you can play around with the values, but I think at 1000ms it looks slick and actually solves the issue nicely and looks intentional.
Maybe Iâll make a plugin for this called âNo FOUT Google Fonts fixâ?? 