There's a Vite config option for everything — you just have to find it: how to cleanly integrate a custom font file in a Statamic addon.
When developing a Statamic addon for Fairu, we came across the challenge of adding a custom font which should be used throughout the new fieldtype, browser etc. It's a self-hosted icon font.
Now, generally, Statamic provides different possibilities of integrating Vite and handling assets, publishables etc. to avoid having to deal with this additional stuff, most of it is being handled automatically then, or can be published using php artisan vendor:publish
Of course, there's always this one thing that sticks out. And this time, something as easy as correctly importing a font as an addon asset took some time to figure out.
Statamic ❤️ Vite
For most applications or addons, the included batteries are perfect and you don't have to change anything. It's a simple system:
Use Vite (the newer the better in our experience) and create a basic configuration
Define the same configuration in your addon
ServiceProviderPublish assets other than your
addon.jsandaddon.cssfor example using$publishables
Problem
For our addon with the integrated icon font, we ran into an issue: Vite built the font correctly, but the path in our css file didn't match the build structure, since only the integrated assets (js, css) are correctly resolved in the /public/vendor/addon_name/assets folder. Our font was resolved to the general vite output folder which didn't match the reality.
Solution
We were able to solve this in the end by using one of the many Vite configuration options, this time: base
What this option does is add some prefix to output for linked assets, which helped us to add the missing info to our font asset implementation:
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});
As usual, a quick fix if you know where to look, but sometimes hard to find.
You want to develop your own addon?
Feel like cooking this up together?
Whether it's an idea, a refactor, or a new build — tell us briefly about your project. We'll get back to you within 24 hours.
Weiterlesen
20. Jul 2026
Notarization of Mac Apps
When notarizing apps, you need some secrets that are sometimes hard to access and hidden. Here are a few tips.
20. Jul 2026
Nori: Invoices, Proposals and Banking in One Place
Introducing Nori: proposals, invoices, time tracking and banking in one place – connected to the tools you already use. Currently in closed beta.
14. Jul 2026
WiFi Vouchers for UniFi: Guest WiFi in Seconds
We built a small app that gets visitors onto our guest WiFi in seconds. No UniFi Controller needed. Free for everyone.