Eigene Schriftarten in Statamic-Addons einbinden
Für alles gibt es eine Vite-Config-Option — man muss sie nur finden: wie man eine eigene Schriftdatei in einem Statamic-Addon sauber einbindet.
Bei der Entwicklung eines Statamic-Addons für Fairu sind wir auf die Herausforderung gestoßen, eine eigene Schriftart einzubinden, die im gesamten neuen Feldtyp, im Browser usw. verwendet werden sollte. Es handelt sich um eine selbst gehostete Icon-Schriftart.
Statamic bietet grundsätzlich verschiedene Möglichkeiten, Vite einzubinden und Assets, Publishables usw. zu handhaben, damit man sich nicht zusätzlich darum kümmern muss – vieles wird dann automatisch erledigt oder kann veröffentlicht werden mit php artisan vendor:publish
Natürlich gibt es immer diese eine Sache, die heraussticht. Und dieses Mal hat es einige Zeit gedauert, herauszufinden, wie man etwas so Einfaches wie das korrekte Importieren einer Schriftart als Addon-Asset hinbekommt.
Statamic ❤️ Vite
Für die meisten Anwendungen oder Addons sind die enthaltenen Bordmittel perfekt, und du musst nichts ändern. Es ist ein einfaches System:
Verwende Vite (unserer Erfahrung nach: je neuer, desto besser) und erstelle eine Basiskonfiguration
Definiere die gleiche Konfiguration in deinem Addon-
ServiceProviderVeröffentliche andere Assets als deine
addon.jsundaddon.csszum Beispiel mithilfe von$publishables
Problem
Bei unserem Addon mit der integrierten Icon-Schriftart sind wir auf ein Problem gestoßen: Vite hat die Schriftart korrekt gebaut, aber der Pfad in unserer CSS-Datei stimmte nicht mit der Build-Struktur überein, da nur die integrierten Assets (js, css) im Ordner /public/vendor/addon_name/assets korrekt aufgelöst werden. Unsere Schriftart wurde in den allgemeinen Vite-Ausgabeordner aufgelöst, was nicht der Realität entsprach.
Lösung
Letztendlich konnten wir das Problem lösen, indem wir eine der vielen Vite-Konfigurationsoptionen genutzt haben, dieses Mal: base
Diese Option fügt der Ausgabe für verlinkte Assets ein Präfix hinzu, was uns geholfen hat, die fehlende Information in unserer Font-Asset-Implementierung zu ergänzen:
1import vue from '@vitejs/plugin-vue2'; 2import laravel from 'laravel-vite-plugin'; 3import { defineConfig, loadEnv } from 'vite'; 4 5export default defineConfig(({ mode }) => { 6 const env = loadEnv(mode, process.cwd(), ''); 7 const { host, protocol } = new URL(env.APP_URL ?? 'http://localhost'); 8 9 return {10 base: mode === 'production' ? '/vendor/addon_name/build/' : '/', 11 plugins: [12 laravel({13 input: ['resources/js/cp.js', 'resources/css/cp.css'],14 refresh: true,15 detectTls: protocol.startsWith('https') ? host : null,16 publicDirectory: 'resources/dist',17 hotFile: 'resources/dist/hot',18 }),19 vue(),20 ],21 server: {22 host,23 },24 };25});Wie so oft: eine schnelle Lösung, wenn man weiß, wo man suchen muss – aber manchmal schwer zu finden.
Du möchtest dein eigenes Addon entwickeln?
Lust, gemeinsam zu kochen?
Ob Idee, Refactor oder Neubau — erzähl uns kurz von deinem Projekt. Wir melden uns innerhalb von 24 Stunden.
Weiterlesen
08. Jul 2026
Triff Sushi beim WeAreDevelopers in Berlin
Wir sind beim WeAreDevelopers World Congress in Berlin und treffen uns gerne mit dir zum Austauschen. Sprich uns einfach an oder sichere dir vorab einen entspannten Kaffee-Slot.
15. Jun 2026
Responsive Images: Der komplette Guide zu srcset & sizes
Responsive Images ohne Handwedeln: wie srcset und sizes wirklich funktionieren, picture für Art Direction — und wie du die Varianten generierst, statt sie von Hand zu pflegen.
06. Jun 2026
Core Web Vitals sind ein Bilder-Problem – und wie Fairu es löst
LCP ist der Core Web Vital, an dem die meisten Seiten scheitern — und schuld sind fast immer die Bilder. Wie Fairu sie bestehen lässt, ganz ohne eigene Pipeline.