silvabokis

squarespace development + strategy + UX + design & build + marketing

+44 (0)7908 262225

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.   
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing. 

Using a CSS3 animation to fix 'font flicker'

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 fix that uses CSS3 animations to hide the flicker. 

Watch the video then come back for the code

The CSS code

The css 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 code above will work on the Alex template but you may need to adjust the selectors for it to work with other templates.