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.
Lust, gemeinsam zu kochen?
Ob Idee, Refactor oder Neubau — erzähl uns kurz von deinem Projekt. Wir melden uns innerhalb von 24 Stunden.
Weiterlesen
20. Jul 2026
Notarisieren von Mac Apps
Beim Notarisieren von Apps benötigt es einige Secrets die mitunter schwer zugänglich und versteckt sind. Hier gibt es ein paar Tips.
20. Jul 2026
Nori: Rechnungen, Angebote und Banking an einem Ort
Wir stellen Nori vor: Angebote, Rechnungen, Zeiterfassung und Banking an einem Ort – verbunden mit den Tools, die du eh nutzt. Derzeit in Closed Beta.
14. Jul 2026
WiFi Vouchers für UniFi: Gäste-WLAN in Sekunden
Wir haben eine kleine App gebaut, mit der wir Besucher:innen in Sekunden ins Gäste-WLAN bringen. Ohne UniFi Controller. Kostenlos für alle.