0

I'm having an issue where the first second of loading time of my website shows the elements of my banner (a form field as well as a background image), but the text shows up significantly later.

The text is using a custom font, called Circular Std. I added the following preload links to my head:

<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Bold.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Medium.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Book.woff2">

Still, the text shows up significantly later than everything else.

Basically, I'm wondering how I can avoid this:

enter image description here

Edit/Update:

Appreciate the answers below, but for me the issue happened to be due to a configuration option within a WordPress plugin called WP Rocket. I had the Optimize CSS Delivery option on which, not only inlines critical CSS, but also apparently defers the loading of the CSS by doing something like this:

<link rel="preload" href="https://example.com/wp-content/uploads/thefile.css" data-rocket-async="style" as="style" onload="this.onload=null;this.rel='stylesheet'" type="text/css" media="all">

So I was experiencing a flash of unstyled content (FOUC) from this.

Dan Mullin
  • 4,285
  • 2
  • 18
  • 34
Timothy Fisher
  • 1,001
  • 10
  • 27

2 Answers2

0

You can do it with a transition triggered by the page load event. Start the body off completely transparent, then fade it in once the page has finished loading.

document.addEventListener("DOMContentLoaded", function() {
  document.body.classList.add("loaded");
});

body {
  opacity: 0;
  transition: all 1s;
}

body.loaded {
  opacity: 1;
}
Dan Mullin
  • 4,285
  • 2
  • 18
  • 34
0

This looks similar to the problem discussed here: How come my custom font wont show when I write stuff with fillText()?

On modern browsers you can delay showing anything until your font is loaded. As in this case it's definitely the font loading that is causing the problem you could do this sort of thing (based on MDN)

Set body style to opacity: 0 then:

let f = new FontFace('myCusomFont', 'url(myCustomFont.ttf)');

f.load().then(function() {
  // Ready to use the font
  document.body.style.opacity = '1';
});

However, you'll want to think through what is to happen if the font never loads (e.g. whatever server you are using is down, so probably abanding the fontload on some reasonable timeout) and also whether you'd like to show the user something while it is loading just to give them comfort that something is happening.

A Haworth
  • 30,908
  • 4
  • 11
  • 14