FOUT (Flash of Unstyled Text) on page load. (And the default font is always loaded)

[anvauy]

Package

filament/filament

Package Version

v4.5.2

Laravel Version

v12.46.0

Livewire Version

v3.7.3

PHP Version

8.4.16

Problem description

While the page loads, a slight change in the typography is noticeable as the browser finishes loading the font to be used.

Expected behavior

The problem has a visual effect that makes navigating between pages less "clean". The same thing happens when using SPAs (only the first page loads).

Recording.2026-01-10.190041.mp4

### Solution found (I don't know if it's the best)
Preload the font, instructing the browser to prioritize loading.
Using <link rel="preload":

head>
 <!-- ... -->
 <link rel="preload" href="/fonts/filament/filament/inter/inter-latin-wght-normal-NRMW37G5.woff2" as="font" type="font/woff2" crossorigin>
</head>

To implement this with Filament, add a hook to AppServiceProvider:

public function boot(): void
{
    FilamentView::registerRenderHook(
        PanelsRenderHook::STYLES_BEFORE,
        fn (): string =>
            '<link rel="preload" href="/fonts/filament/filament/inter/inter-latin-wght-normal-NRMW37G5.woff2" as="font" type="font/woff2" crossorigin />',
        );
}

### Result:

Recording.2026-01-10.192526.mp4

Note:

Another thing I noticed is that even if a different font is used and the local font provider is selected, Filament registers the "Inter" font in the FilamentAsset.

_It does so in: vendor/filament/filament/src/FilamentServiceProvider.php packageBooted():

Is there a way to remove "Inter" without touching vendor/filament files?

Steps to reproduce

With any new project. I'm using Windows 11 and the Chrome browser.

In AdminPanelProvider:

class AdminPanelProvider extends PanelProvider
{
public function panel(Panel $panel): Panel
{
return $panel
->default()
->id('admin')
->path('admin')
->login()
->colors([
'primary' => Color::Amber,
])
->topNavigation(true)
->topbar(true)
...

Reproduction repository (issue will be closed if this is not valid)

https://github.com/anvauy/demo-issue-fout-app.git

Relevant log output

[danharrin]

Can you submit a PR with your suggestion then please? I think you just need to modify LocalFontProvider

[anvauy]

Thanks for the reply, Dan.
If I feel like it, I'll submit a pull request with the suggestion. I'm fairly new to Filament.

I was able to confirm that the CSS for the Inter font is always loaded in FilamentServiceProvider.
This happens regardless of whether a custom font is used.

        FilamentAsset::register([
            Font::make('inter', __DIR__ . '/../dist/fonts/inter'), // <== Here
            Js::make('app', __DIR__ . '/../dist/index.js')->core(),
            Js::make('echo', __DIR__ . '/../dist/echo.js')->core(),
            Theme::make('app', __DIR__ . '/../dist/theme.css'),
        ], 'filament/filament');

When the font is not specified in the panel, Filament assigns the default font from the HasFont trait in the getFontFamily() method. Since getFontUrl() is empty, the font registered in FilamentServiceProvider is used (see code above).

public function getFontFamily(): string
{
return $this->evaluate($this->fontFamily) ?? 'Inter Variable';
}

Perhaps a solution is to modify the getFontUrl() method of the trait so that it loads the URL of the Inter font by default, instead of from FilamentServiceProvider. This way, font management is centralized in the HasFont trait.

Again, I don't know much about Filament yet ;-)

Thanks, regards