Sage 10 - Tailwind - Proper way to include custom fonts in Gutenberg editor

[ben]

@ierpe

What I don’t understand is why the @font-face relative URLs in my app.css are working on the frontend but not within the editor (instead of the url to mysite.com/app/themes/mytheme/ressources/fonts/… it’s trying to load the fonts at mysite.com/fonts/… )

This should be fixed by adding setPublicPath to your Bud config:

roots/sage/blob/20f92ebe642fe1b97a35f52bf27b220676f7f6df/bud.config.mjs#L39-L42

@ierpe

As you can see I’m kind of lost here I just would like to know the proper and most efficient way of using custom fonts with Sage and Gutenberg.

1. Add the font to your Tailwind config.
2. Add the font to your CSS. Make sure the editor CSS is including this same CSS.

You’ve already done these things

FYI - Sage now automatically generates theme.json from a Tailwind config. You might want to consider pulling that update into your theme.