# Custom font fine in admin when Vite running hot, but not after npm run build

**URL:** https://discourse.roots.io/t/custom-font-fine-in-admin-when-vite-running-hot-but-not-after-npm-run-build/29298
**Category:** sage
**Tags:** tailwind, vite, sage11
**Created:** 2025-02-24T23:39:44Z
**Posts:** 11

## Post 1 by @raffjones — 2025-02-24T23:39:44Z

I’m using custom fonts defined using `@font-face` statements in `editor.css`

When Vite is running hot, these display fine in admin - here’s a nav:

 ![image](https://discourse.roots.io/uploads/default/original/2X/4/4c5de7d9295769d3634176b0c7923add37d105c6.png)

But after running `npm run build` they no longer work - I just get a default sans:

 ![image](https://discourse.roots.io/uploads/default/original/2X/6/697f47fc92a2265eacc0682dbbadbb5df8a4ebbb.png)

All other styles are loading and I can even see the `@font-face` statements in the styles within `window._wpLoadBlockEditor`, for example: `@font-face{font-family:FSIndustrie;font-style:normal;font-weight:400;src:url(\/app\/themes\/my-theme\/public\/build\/assets\/FSIndustrie-Regular-BWK6lX9d.woff)format(\"woff\")}` but they are just not loading or displaying. I used Charles web proxy and the asset is never accessed. The only asset actually loaded from the theme is `editor.js`

Additionally, if I change the code in `setup.php` from

```
$settings['styles'][] = [
        'css' => Vite::isRunningHot()
            ? "@import url('{$style}')"
            : Vite::content('resources/css/editor.css'),
    ];
```

to just

```
$settings['styles'][] = [
        'css' => "@import url('{$style}')"
    ];
```

It works perfectly after `npm run build` (so this is my workaround)

So why is the inlined Vite output not loading the fonts?

Has anyone got any pointers as to why this might be? I’m drawing a blank and kind of tearing my hair out as everything looks to be correct. Thanks :slight_smile:

---

## Post 2 by @ThinkByDesign — 2025-04-13T20:00:45Z

I’m trying to figure this out as well. It seems to only have issues with @font-face so far.

---

## Post 3 by @Log1x — 2025-04-13T21:16:37Z

Did you update `setup.php` to reflect the latest changes to [sage/app/setup.php at 5ffb5636b2eae99afd6522eaba7e7809d8b939f5 · roots/sage · GitHub](https://github.com/roots/sage/blob/5ffb5636b2eae99afd6522eaba7e7809d8b939f5/app/setup.php#L20) ?

---

## Post 5 by @raffjones — 2025-04-13T22:06:56Z

I made those changes myself and it’s fine in the normal editor.

However, it doesn’t work when previewing block patterns, just as an aside.

In situ, when editing a post containing a block pattern, custom fonts render fine:

 ![image](https://discourse.roots.io/uploads/default/original/2X/a/a1bac13a3bd731bc4b1e560cca395a1daa86eb72.png)

But previewing the block pattern elsewhere, the fonts are good old Times New Roman:

 ![image](https://discourse.roots.io/uploads/default/original/2X/f/f0b7269c4059fe7e6fd6e3324d902e8a3213aee2.png)

---

## Post 7 by @Sebastian_Seidel — 2025-04-14T18:28:55Z

I had issues with loading styles into the different environments as well and ended up with different approaches for production/dev env like this:

```
if(!Vite::isRunningHot()) {
        $style = Vite::content('resources/styles/editor.scss');
        $settings['styles'][] = [
            'css' => $style,
        ];
    } else {
        $style = Vite::asset('resources/styles/editor.scss');
        $settings['styles'][] = [
            'css' => "@import url('{$style}')",
        ];
    }
```

To me it looked like when running the dev server it parsed the @import statement whereas in production it failed somehow..

---

## Post 8 by @sev — 2025-05-12T15:23:18Z

Same here, fonts can’t be loaded and produce a 404 error even as anonymous user.

---

## Post 9 by @sev — 2025-05-12T15:28:52Z

One thing I noticed is that the src misses a whitespace:

Sage 10 project  
url(/app/themes/trust/public/fonts/Futura-PT\_Book.woff2) format(“woff2”)

Sage 11 with fonts not loading after build:  
src: url(/app/themes/trust/public/assets/exo-2-v24-latin-regular-D8MC3\_dU.woff2)format(“woff2”)

---

## Post 10 by @ben — 2025-05-12T15:56:54Z

Follow this guide: [How to Setup Fonts | Sage Docs | Roots](https://roots.io/sage/docs/fonts-setup/)

Also note this change to Sage introduced in v11.0.1: [https://github.com/roots/sage/pull/3248](https://github.com/roots/sage/pull/3248)

If you’re still running into trouble, please create a new topic

---

## Post 11 by @ben — 2025-05-12T15:56:59Z