Using custom fonts in Statamic addons
We developed another Statamic addon, this time for our own product Fairu. 🚀 While it was fun to tinker with all options to really provide a smooth experience, we ran into an issue with something as simple as a font file – who would have thought.
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
Now, 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});