Blocking loading of google fonts

Jae · Post by **Jae** » Sun Aug 23, 2026 3:21 am

I'm creating a new site using some google fonts. I have followed all instructions I can find but cannot get the font to stay hidden until the page is rendered - I get the "default' fonts flicker for a second.

I have added the fonts through Tools|Options|Fonts|Google Fonts and selected the host google fonts locally option (that part works - the woff files get uploaded as expected).

I have added the below to each page, "Between <head></head> tags

Code: Select all

<style>
@font-face {
    font-display: block !important;
}
</style>

No go.

What am I doing wrong?

Jae · Post by **Jae** » Sun Aug 23, 2026 3:37 am

UPDATE: I added the below to the HEAD section of the SITE HTML. Seems to work..

Code: Select all

<style>
html.fonts-loading body {
    visibility: hidden;
    opacity: 0;
}

html.fonts-loaded body {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s ease-in;
}
</style>

<script>
document.documentElement.classList.add('fonts-loading');

window.addEventListener('load', function () {

    if (document.fonts) {
        Promise.all([
            document.fonts.load('16px "League Gothic"'),
            document.fonts.load('16px "DM Serif Display"'),
            document.fonts.load('16px "Inter"')
        ]).then(showPage).catch(showPage);
    } else {
        showPage();
    }

    // Safety net — never leave the page hidden
    setTimeout(showPage, 3000);

    function showPage() {
        document.documentElement.classList.remove('fonts-loading');
        document.documentElement.classList.add('fonts-loaded');
    }
});
</script>

AliGW · Post by **AliGW** » Sun Aug 23, 2026 5:22 am

Strange - I haven't had to add any custom code and Google Fonts work fine without any of the flickering you mention.

www.wysiwygwebbuilder.com

Blocking loading of google fonts

Blocking loading of google fonts

Re: Blocking loading of google fonts

Re: Blocking loading of google fonts