Images and Fonts

Images

Store theme image assets in:

src/assets/img/

These files are automatically copied to the build directory and included in the production export. Deleting a file from src/assets/ also removes it from the build, so the two stay in sync.

To reference an image in your PHP templates:

<img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo">

Fonts

Store custom font files in:

src/assets/fonts/

They are copied to a fonts/ folder at the root of the compiled theme.

The default theme registers its bundled fonts (Inter and Fira Code) in src/theme/theme.json, which is the recommended approach for block themes:

{
  "name": "Inter",
  "slug": "inter",
  "fontFamily": "Inter, sans-serif",
  "fontFace": [
    {
      "src": ["file:./fonts/inter/Inter-VariableFont_slnt,wght.woff2"],
      "fontWeight": "200 800",
      "fontStyle": "normal",
      "fontFamily": "Inter"
    }
  ]
}

Add entries like this under settings.typography.fontFamilies in theme.json.

Alternatively, load fonts with @font-face in your CSS. Note that the compiled style.css sits at the theme root, next to the fonts/ folder, so the path is relative to it:

@font-face {
  font-family: "CustomFont";
  src: url("fonts/CustomFont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

For Google Fonts or other externally hosted fonts, enqueue them in your theme's functions.php instead of bundling the files locally.