fix: Inter font preloading (#19057)

bin/build.js

@@ -1,7 +1,16 @@
 import * as esbuild from 'esbuild'
+import * as fs from 'fs'
 
 const isDev = process.argv.includes('--dev')
 
+function cleanDirectory(directory) {
+    if (fs.existsSync(directory)) {
+        fs.rmSync(directory, { recursive: true })
+    }
+
+    fs.mkdirSync(directory, { recursive: true })
+}
+
 async function compile(options) {
     const context = await esbuild.context(options)
 
@@ -99,6 +108,8 @@ compile({
     outfile: `./packages/panels/dist/echo.js`,
 })
 
+cleanDirectory('./packages/panels/dist/fonts/inter')
+
 compile({
     ...defaultOptions,
     platform: 'browser',

packages/panels/resources/views/components/layout/base.blade.php

@@ -66,6 +66,9 @@
         @filamentStyles
 
         {{ filament()->getTheme()->getHtml() }}
+        {{ filament()->getFontPreloadHtml() }}
+        {{ filament()->getMonoFontPreloadHtml() }}
+        {{ filament()->getSerifFontPreloadHtml() }}
         {{ filament()->getFontHtml() }}
         {{ filament()->getMonoFontHtml() }}
         {{ filament()->getSerifFontHtml() }}

packages/panels/src/Facades/Filament.php

@@ -63,6 +63,9 @@ use Livewire\Component;
  * @method static Htmlable getFontHtml()
  * @method static Htmlable getMonoFontHtml()
  * @method static Htmlable getSerifFontHtml()
+ * @method static Htmlable getFontPreloadHtml()
+ * @method static Htmlable getMonoFontPreloadHtml()
+ * @method static Htmlable getSerifFontPreloadHtml()
  * @method static string getFontProvider()
  * @method static string getMonoFontProvider()
  * @method static string getSerifFontProvider()

packages/panels/src/FilamentManager.php

@@ -197,6 +197,21 @@ class FilamentManager
         return $this->getCurrentOrDefaultPanel()->getSerifFontHtml();
     }
 
+    public function getFontPreloadHtml(): Htmlable
+    {
+        return $this->getCurrentOrDefaultPanel()->getFontPreloadHtml();
+    }
+
+    public function getMonoFontPreloadHtml(): Htmlable
+    {
+        return $this->getCurrentOrDefaultPanel()->getMonoFontPreloadHtml();
+    }
+
+    public function getSerifFontPreloadHtml(): Htmlable
+    {
+        return $this->getCurrentOrDefaultPanel()->getSerifFontPreloadHtml();
+    }
+
     public function getFontProvider(): string
     {
         return $this->getCurrentOrDefaultPanel()->getFontProvider();

packages/panels/src/Panel/Concerns/HasFont.php

@@ -5,7 +5,9 @@ namespace Filament\Panel\Concerns;
 use Closure;
 use Filament\FontProviders\BunnyFontProvider;
 use Filament\FontProviders\LocalFontProvider;
+use Filament\Support\Facades\FilamentAsset;
 use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Support\HtmlString;
 
 trait HasFont
 {
@@ -15,22 +17,41 @@ trait HasFont
 
     protected string | Closure | null $fontUrl = null;
 
+    /**
+     * @var array<string> | Closure | null
+     */
+    protected array | Closure | null $fontPreload = null;
+
     protected string | Closure | null $monoFontFamily = null;
 
     protected string | Closure | null $monoFontProvider = null;
 
     protected string | Closure | null $monoFontUrl = null;
 
+    /**
+     * @var array<string> | Closure | null
+     */
+    protected array | Closure | null $monoFontPreload = null;
+
     protected string | Closure | null $serifFontFamily = null;
 
     protected string | Closure | null $serifFontProvider = null;
 
     protected string | Closure | null $serifFontUrl = null;
 
-    public function font(string | Closure | null $family, string | Closure | null $url = null, string | Closure | null $provider = null): static
+    /**
+     * @var array<string> | Closure | null
+     */
+    protected array | Closure | null $serifFontPreload = null;
+
+    /**
+     * @param  array<string> | Closure | null  $preload
+     */
+    public function font(string | Closure | null $family, string | Closure | null $url = null, string | Closure | null $provider = null, array | Closure | null $preload = null): static
     {
         $this->fontFamily = $family;
         $this->fontUrl = $url;
+        $this->fontPreload = $preload;
 
         if (filled($provider)) {
             $this->fontProvider = $provider;
@@ -67,10 +88,37 @@ trait HasFont
         return $this->evaluate($this->fontUrl);
     }
 
-    public function monoFont(string | Closure | null $family, string | Closure | null $url = null, string | Closure | null $provider = null): static
+    /**
+     * @return array<string>
+     */
+    public function getFontPreload(): array
+    {
+        $preload = $this->evaluate($this->fontPreload);
+
+        if ($preload !== null) {
+            return $preload;
+        }
+
+        if (! $this->hasCustomFontFamily()) {
+            return $this->getDefaultFontPreload('inter');
+        }
+
+        return [];
+    }
+
+    public function getFontPreloadHtml(): Htmlable
+    {
+        return $this->getPreloadHtml($this->getFontPreload());
+    }
+
+    /**
+     * @param  array<string> | Closure | null  $preload
+     */
+    public function monoFont(string | Closure | null $family, string | Closure | null $url = null, string | Closure | null $provider = null, array | Closure | null $preload = null): static
     {
         $this->monoFontFamily = $family;
         $this->monoFontUrl = $url;
+        $this->monoFontPreload = $preload;
 
         if (filled($provider)) {
             $this->monoFontProvider = $provider;
@@ -107,10 +155,27 @@ trait HasFont
         return $this->evaluate($this->monoFontUrl);
     }
 
-    public function serifFont(string | Closure | null $family, string | Closure | null $url = null, string | Closure | null $provider = null): static
+    /**
+     * @return array<string>
+     */
+    public function getMonoFontPreload(): array
+    {
+        return $this->evaluate($this->monoFontPreload) ?? [];
+    }
+
+    public function getMonoFontPreloadHtml(): Htmlable
+    {
+        return $this->getPreloadHtml($this->getMonoFontPreload());
+    }
+
+    /**
+     * @param  array<string> | Closure | null  $preload
+     */
+    public function serifFont(string | Closure | null $family, string | Closure | null $url = null, string | Closure | null $provider = null, array | Closure | null $preload = null): static
     {
         $this->serifFontFamily = $family;
         $this->serifFontUrl = $url;
+        $this->serifFontPreload = $preload;
 
         if (filled($provider)) {
             $this->serifFontProvider = $provider;
@@ -146,4 +211,65 @@ trait HasFont
     {
         return $this->evaluate($this->serifFontUrl);
     }
+
+    /**
+     * @return array<string>
+     */
+    public function getSerifFontPreload(): array
+    {
+        return $this->evaluate($this->serifFontPreload) ?? [];
+    }
+
+    public function getSerifFontPreloadHtml(): Htmlable
+    {
+        return $this->getPreloadHtml($this->getSerifFontPreload());
+    }
+
+    /**
+     * @return array<string>
+     */
+    protected function getDefaultFontPreload(string $fontId): array
+    {
+        $fonts = FilamentAsset::getFonts(['filament/filament']);
+
+        foreach ($fonts as $font) {
+            if ($font->getId() !== $fontId) {
+                continue;
+            }
+
+            $path = $font->getPath();
+
+            if (($path === null) || (! is_dir($path))) {
+                return [];
+            }
+
+            $files = glob($path . '/*-latin-wght-normal-*.woff2');
+
+            if (($files === false) || ($files === [])) {
+                return [];
+            }
+
+            return [asset($font->getRelativePublicPath() . '/' . basename($files[0]))];
+        }
+
+        return [];
+    }
+
+    /**
+     * @param  array<string>  $urls
+     */
+    protected function getPreloadHtml(array $urls): Htmlable
+    {
+        if ($urls === []) {
+            return new HtmlString('');
+        }
+
+        $html = '';
+
+        foreach ($urls as $url) {
+            $html .= "<link rel=\"preload\" href=\"{$url}\" as=\"font\" type=\"font/woff2\" crossorigin />\n";
+        }
+
+        return new HtmlString($html);
+    }
 }