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

sage
,
1

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
image836×108 4.42 KB

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

image
image798×100 4.97 KB

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: