Custom font loads only after moments

[ghost]

Hi Jeffrey, fantastic work on the tailpress-theme. I currently use it for a relaunch of my companies website. I want to use a custom font. So what I did was to add @font-face rule to the custom.css-file. Then in the tailwind.config.js file I extended the following:

   extend: {
            fontFamily: {
                sans: ['Greta Sans Std', ...defaultTheme.fontFamily.sans]
            }
        }

When I open the website now, the font is loaded correctly but only after a few milliseconds, so first the other font is shown. Is there a way to load the fonts before in order for correct font loading? I also set font-display to swap. Would be nice to know how you would do it, thanks!

[jarednthomas]

How are you enqueueing the font? I'm adding an enqueue script, and then adding it to wp_head:

function your_theme_enqueue_script() {
    wp_enqueue_script( 'typekit', '//use.typekit.net/abcdefg.js', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_script' );
add_action( 'admin_enqueue_scripts', 'your_theme_enqueue_script' );

function  your_theme_enqueue_typekit_inline() {
    if ( wp_script_is( 'typekit', 'enqueued' ) ) {
        echo '<script type="text/javascript">try{Typekit.load();}catch(e){}</script>';
    }
}
add_action( 'wp_head', 'your_theme_enqueue_typekit_inline' );
add_action( 'admin_head', 'your_theme_enqueue_typekit_inline' );

With this method I'm not getting any flash of unstyled or invisible text, etc