Val

Overview

Font Directory Schema

s.fontdir(dir, options?)

A directory of fonts that is the whole module. It is an s.filedir() whose accept defaults to the web font formats - font/woff2, font/woff, font/ttf and font/otf - so it stores the same content and is checked and fixed the same way.

What it adds is the default accept, and a check that accept names only font types. The font previews in Val Studio - each font set in itself, in the gallery and wherever a font is picked - come from the file's font mimeType, so fonts in a plain s.filedir() are previewed too. A field picks a font with s.font(fontsModule), which stores only the path and refuses a module that is not a font directory.

Upgrading? s.fontdir() replaces s.fontset({ dir, ...options }), which still works but is deprecated.

See: /docs/api/schema/filedir, /docs/files, /docs/remote

Options:

dir (first argument): "/public" | `/public/${string}`

Required. Where the fonts are stored. Must start with /public. Two collections may not claim the same directory.

s.fontdir("/public/val/fonts")

accept: string

Which font types may be uploaded. Defaults to every web font format. Narrow it to font/woff2 to keep to the one format every current browser reads and that is smallest on the wire. Anything that is not a font type is refused - use s.filedir() for other files.

s.fontdir("/public/val/fonts", { accept: "font/woff2" })

Methods:

.remote: method

Store the fonts on Val's remote server instead of in your git repository. See the remote files guide.

s.fontdir("/public/val/fonts").remote()

Examples:

Defining a font directory

content/fonts.val.ts

import { c, s } from "../val.config";

export default c.define("/content/fonts.val.ts", s.fontdir("/public/val/fonts"), {
  // Entries are added when you upload a font. They are keyed by file path.
  "/public/val/fonts/inter_a1b2c.woff2": {
    mimeType: "font/woff2",
  },
});

Picking a font

content/theme.val.ts

import { c, s } from "../val.config";
import fontsVal from "./fonts.val";

export default c.define(
  "/content/theme.val.ts",
  s.object({
    headingFont: s.font(fontsVal),
  }),
  {
    // Only the path: the mimeType lives in the font directory
    headingFont: { path: "/public/val/fonts/inter_a1b2c.woff2" },
  },
);