FilamentF
Filament•3y ago•
13 replies
John

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');
}

The vite build will parse that url and make it available like so: 
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
 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">'),
        );

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