Smooth page load script to avoid font flickering

The best way to avoid font flickering during page loads is to apply a CSS animation – fade in effect during the page load. Please have a look at the following script and include it in your CSS file or as an internal CSS:

@keyframes pageFadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

body {
  opacity:0;
  animation:pageFadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:0.15s;
  animation-delay: .1s
}

That’s it! You can now play with the animation-duration and animation-delay according to your preferences.

Stay tuned for more cool updates 🙂