Avoiding Flash Of Unstyled Content (FOUC) with Typekit + YouTube

Further followup, removing the Typekit font from my child styles.css resolves the issue, therefore the slight FOUC / stutter on font change presumably can be prevented by only displaying my Typekit font? The trouble appears to be at the moment that Enfold is attempting to load a default font, and then switch to my Typekit font. In actual fact, I only want the Typekit font to be used throughout the entire site.

I’ve added the font to the theme and set it as the default font for body and headings, as per this post, unfortunately the FOUC / stutter is quite obvious: https://kriesi.at/support/topic/new-custom-font/

My code is:

add_action( ‘init’, ‘enfold_customization_swtich_fonts’ );
function enfold_customization_swtich_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}

add_filter( ‘avf_google_heading_font’, ‘avia_add_heading_font’);
function avia_add_heading_font($fonts)
{
$fonts[‘kepler-std-display’] = ‘kepler-std-display’;
return $fonts;
}
add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
function avia_add_content_font($fonts)
{
$fonts[‘kepler-std-display’] = ‘kepler-std-display’;
return $fonts;
}
Thanks in advance

• This reply was modified 8 years, 3 months ago by csmwebdesign.

Hi Josue, the site isn’t live yet so there is no other way of accessing. If you are viewing a maintenance page, the entry in the hosts file is not being referenced correctly. Hosts file entry added to private content.
Thanks