TLThemeFont

A font definition within a theme. Maps a font style name to a CSS font-family declaration and optional font face descriptors for loading.

interface TLThemeFont {}

Example

import { TLThemeFont } from "@tldraw/tlschema";

const customSans: TLThemeFont = {
  fontFamily: "'Inter', sans-serif",
  faces: [
    {
      family: "Inter",
      src: { url: "https://example.com/Inter-Regular.woff2", format: "woff2" },
      weight: "normal",
    },
    {
      family: "Inter",
      src: { url: "https://example.com/Inter-Bold.woff2", format: "woff2" },
      weight: "bold",
    },
  ],
};

Properties

Font face definitions for loading. Omit for system fonts that don't need loading.

faces?: TLFontFace[];

CSS font-family declaration, e.g. "'Inter', sans-serif"

fontFamily: string;

Icon for the style panel. Accepts a string icon ID (resolved via assetUrls.icons) or a React element (TLUiIconJsx). Defaults to the built-in icon for known fonts, or 'font-draw' for custom fonts.

icon?: unknown;