Home › Forums › WoodMart support forum › Preload custom loaded fonts

Preload custom loaded fonts

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 8, 2021 at 5:39 pm #280330

    protectionshopnl
    Participant

    Hello all,

    Is it possible to preload custom loaded fonts uploaded to WordPress/Woodmart backend?

    Source I’ve read: https://web.dev/font-display/

    Second, maybe we can include font-display: swap in the @font-face style. But how can we do this in our configured custom fonts?

    We’ve installed our custom fonts via: typography > custom fonts. And added both .woff and .woff2 files.

    Thanks for helping!

    Regards,
    Fabian

    April 9, 2021 at 6:36 am #280460

    Artem Temos
    Keymaster

    Hello,

    There is no such option in our theme by default. But you can try to add the following code to the functions.php file in your child theme and specify all font files you want to preload

    // Preload fonts for mobile theme

function dns_prefetch_mobile() {
	echo "<link href='https://yourURL.test/font1.woff' as='font' type='font/woff' crossorigin='anonymous'>";
	echo "<link href='https://yourURL.test/font2.woff2' as='font' type='font/woff2' crossorigin='anonymous'>";
	echo "<link href='https://yourURL.test/font3.woff' as='font' type='font/woff' crossorigin='anonymous'>";
}
add_action( 'wp_head', 'dns_prefetch_mobile', 0 );

    Kind Regards

    April 9, 2021 at 7:26 am #280491

    protectionshopnl
    Participant

    Hello Artem,

    Thanks! I wi test your snippet code and let you know.

    Another thing I wonder if that’s possible is including font-display: swap in the @font-face style. So fonts wi be visible while loading. But how can we do this in our configured custom fonts?

    By default browser will wait until fonts are downloaded to display the font. This is the reason for the error ‘ensure text remains visible during webfont load’. We would like to tackle this 🙂

    Regards,
    Fabian

    April 9, 2021 at 7:42 am #280519

    Artem Temos
    Keymaster

    Hello,

    You can configure the font display property for our theme fonts in Dashboard -> Theme settings -> Performance -> Fonts & Icons https://gyazo.com/c45384b026ed939a405c39f624d5497d

    Kind Regards

    April 9, 2021 at 7:47 am #280524

    protectionshopnl
    Participant

    Hello Arthem,

    Thanks, but I know. I asked this question because I’m wondering if it’s possible to configure display property for custom loaded fonts. Not for Google Fonts, because I’m not using them. I’ve configured custom fonts via: theme settings > typography > custom fonts and theme settings > typography

    Regards,
    Fabian

    April 9, 2021 at 8:47 am #280577

    Artem Temos
    Keymaster

    Yes, this option works both for Google fonts and custom fonts uploaded.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)