Flash of unstyled text (FOUT) with self-hosted font

I'm facing a case of "Flash of unstyled text (FOUT)".
I'm using a custom font, self-hosted:

// filament.css
@font-face {
    font-family: 'Concert One';
    font-style: normal;
    font-weight: 400;
    font-display: block; // previously 'swap'
    src: url(../fonts/Concert_One/ConcertOne-Regular.ttf) format('truetype');
}

// filament.css
@font-face {
    font-family: 'Concert One';
    font-style: normal;
    font-weight: 400;
    font-display: block; // previously 'swap'
    src: url(../fonts/Concert_One/ConcertOne-Regular.ttf) format('truetype');
}

The vite build will parse that url and make it available like so:

http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf

http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf

.

The issue I'm facing is that the text flickers from browser default to my custom font. I've changed

font-display

font-display

from swap to block. It no longer flickers, but it takes about half a second to render.

If I add this:

        Filament::registerRenderHook(
            'head.start',
            fn() => Blade::render('<link rel="preload" href="http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf" as="font" type="font/ttf" crossorigin="anonymous">'),
        );

        Filament::registerRenderHook(
            'head.start',
            fn() => Blade::render('<link rel="preload" href="http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf" as="font" type="font/ttf" crossorigin="anonymous">'),
        );

the problem is solved.
But... that href is dynamically built by vite using a random hash.
Is there another way to prevent this?

Flash of unstyled text (FOUT) with self-hosted font

I'm facing a case of "Flash of unstyled text (FOUT)".
I'm using a custom font, self-hosted:

// filament.css
@font-face {
    font-family: 'Concert One';
    font-style: normal;
    font-weight: 400;
    font-display: block; // previously 'swap'
    src: url(../fonts/Concert_One/ConcertOne-Regular.ttf) format('truetype');
}

// filament.css
@font-face {
    font-family: 'Concert One';
    font-style: normal;
    font-weight: 400;
    font-display: block; // previously 'swap'
    src: url(../fonts/Concert_One/ConcertOne-Regular.ttf) format('truetype');
}

The vite build will parse that url and make it available like so:

http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf

http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf

.

The issue I'm facing is that the text flickers from browser default to my custom font. I've changed

font-display

font-display

from swap to block. It no longer flickers, but it takes about half a second to render.

If I add this:

        Filament::registerRenderHook(
            'head.start',
            fn() => Blade::render('<link rel="preload" href="http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf" as="font" type="font/ttf" crossorigin="anonymous">'),
        );

        Filament::registerRenderHook(
            'head.start',
            fn() => Blade::render('<link rel="preload" href="http://localhost/build/assets/ConcertOne-Regular-56d2074a.ttf" as="font" type="font/ttf" crossorigin="anonymous">'),
        );

the problem is solved.
But... that href is dynamically built by vite using a random hash.
Is there another way to prevent this?

Flash of unstyled text (FOUT) with self-hosted font

Similar Threads

Flash of unstyled text (FOUT) with self-hosted font

Similar Threads

Similar Threads

Similar Threads