`bud.asset` font filename hashes (production)

bud
1

The filenames processed by bud.asset have hashes in their filenames (which is intended and expected).

Using theme.json/fontFamilies theme-specific fonts can be defined (and loaded using WordPress Web Fonts Loader). The src property expects the paths to the font files.

How can those files be correctly referenced, with the hashes included.
bud can generate a theme.json on build, but the complete theme.json be specified with this - or derived from an existing theme.json file?
Notably the styles and templateParts properties also need to be set (without Tailwind or beyond that).
Or can the filename hashes be selectively disabled for those font files?

2

Using the setOption method allows to set theme.json options outside of settings.
Example:

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     *
     * @see {@link https://bud.js.org/extensions/sage/theme.json/}
     * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
     */
    .wpjson
      .setOption('templateParts', [
        {
          "name": "header",
          "title": "Narrow header",
          "area": "header"
        },
        {
          "name": "header-large",
          "title": "Large header",
          "area": "header"
        },

        {
          "name": "footer",
          "title": "Footer",
          "area": "footer"
        }
    ])
1 Like
3

@strarsis Did you ever find a solution for referencing the hash-named font files in theme.json? I just ran into this and am fairly stumped.

It doesn’t look like Bud has a way to retrieve those filenames during compilation. The correct filenames are in the manifest, but unfortunately WordPress doesn’t seem to have a way to filter the src property it outputs in @fontface, either.

4

Yes, this is solved by adjusting the font file paths in the theme.json as an extra step during bud build:

There is no bud extension yet, though this approach works.

1 Like