Free Plugin - Using a CSS3 animation to fix 'font flicker'

More in Plugins, Scripting and Styling

If you use custom fonts on your Squarespace website you might have noticed 'font flicker' - also know as  FOUT (flash of unstyled text) - the page initially displays in the default font and then swaps to the custom font, causing a distracting flicker. 

Here's a free plugin fix that uses CSS3 animations to hide the flicker. 

Watch the video then come back for the plugin code

The CSS plugin code

The css plugin should be inserted into the custom css area in your site's Squarespace admin area.  

#desktopNav, .title-desc-inner {
  animation: fade-me-in 1.5s;
}

@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}

The plugin code above will work on the Alex template but you may need to adjust the selectors for it to work with other templates.