Fonts

Fonts creates browser FontFace objects from named definitions and adds loaded fonts to document.fonts. Game owns the shared font service at services.fonts.

Quick Start

const fontDefinitions = [{ name: 'ui', path: '/fonts/ui.woff2' }];

const game = new Game(
  canvas,
  fontDefinitions,
  imageDefinitions,
  soundDefinitions
);

// Use the definition name in normal canvas text drawing.
game.services.context.font = '24px ui';
game.services.context.fillText('Continue', 24, 48);

flowchart LR
	A[FontDefinition] --> B[Fonts.load]
	B --> C[Create FontFace]
	C --> D[Start font.load]
	D --> E[Add loaded face to document.fonts]
	F[Canvas context.font] --> G[Use definition name]

Methods

load(fontDefinitions)

fonts.load(fontDefinitions);

Creates a FontFace for every definition, stores it by name, starts loading it, and adds it to document.fonts after the browser finishes loading.

Definition field	Meaning
name	The font-family name used later in context.font, such as "24px ui".
path	URL of the font file.

load() returns immediately; it does not wait for network loading to finish.

get(name)

const font = fonts.get('ui');

Returns the named FontFace, or undefined if that name was never loaded. Usually, code does not need the FontFace itself: use the definition name in the canvas context’s font string.

Loading is asynchronous

A font may not be ready on the very first render after load(). The browser initially uses a fallback font and switches when the FontFace finishes loading. Do not assume get(name) means the network request has completed.

Internal state

fonts is a Record<string, FontFace> keyed by definition name. Treat it as a service-owned lookup and use get() for inspection rather than replacing entries directly.