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:

2

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

3

Did you update setup.php to reflect the latest changes to sage/app/setup.php at 5ffb5636b2eae99afd6522eaba7e7809d8b939f5 · roots/sage · GitHub ?

5

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
image2492×778 104 KB

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

image
image2822×1312 104 KB

7

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..

8

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

9

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”)

10

Follow this guide: How to Setup Fonts | Sage Docs | Roots

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

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

1 Like