hero-elements.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hero Element Time Canary</title>
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet" />
  </head>
  <body>
    <div style="max-width: 600px; margin: 40px auto;">
      <h1>This element should render and then switch to a different font</h1>
      <p>
        This first image is not the hero:
        <img
          src="https://img.speedcurve.com/donut.png"
          style="height: 50px;"
        />
        ...
      </p>
      <hr />
      <p>This one is!</p>
      <img id="hero" style="width: 100%;" />
    </div>

    <script>
      setTimeout(() => {
        document.querySelector("h1").style.fontFamily = '"Press Start 2P"';
      }, 1500);

      setTimeout(() => {
        document.querySelector("#hero").src = "https://img.speedcurve.com/donut.png";
      }, 2500);
    </script>
  </body>
</html>