— development

Using custom fonts in Statamic addons

22. April 2025 development
Martin Reitschmied UI/UX

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:

  1. Use Vite (the newer the better in our experience) and create a basic configuration

  2. Define the same configuration in your addon ServiceProvider

  3. Publish assets other than your addon.js and addon.css for example using $publishables

Statamic Documentation Vite in addons

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?

Martin Reitschmied

UI/UX

Vienna
Mentioned in this post

Fairu

published

Digital Asset Management, finally easy to digest.

Fairu is our digital asset management — built for teams who don't just want to store images, videos, and documents, but actually find t
Curious?

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.

Start a project
Kochbuch

Weiterlesen

Alle Beiträge

15. Jun 2026

Building Responsive Images: The Complete srcset & sizes Guide

Responsive images without hand-waving: how srcset and sizes really work, picture for art direction — and how to generate the variants instead of maintaining them by hand.

06. Jun 2026

Core Web Vitals Are an Image Problem – And How Fairu Solves It

LCP is the Core Web Vital most sites fail — and images are almost always to blame. How Fairu gets them passing, with no pipeline of your own.

10. May 2026

Release 1.109 - Now supports google + github login

Starting today, you can sign in to Fairu with Google or GitHub — no separate password needed anymore.