arcade2d
Class

FontAsset

assets/font-asset.ts:42

Extends Asset

An Asset wrapping a loaded web font registered on the document's FontFaceSet.

FontAsset is what AssetLibrary.load produces for any path that resolves to AssetType.Font — TTF, OTF, WOFF, or WOFF2. It is the handoff between the asset layer and the text-rendering layer: the Text component takes a FontAsset (or the FontAsset.family string directly) and styles its underlying canvas text against that family, so game code references fonts by key and never touches a FontFace itself.

The browser FontFace is deliberately not part of arcade2d's stable surface — it is reachable only through FontAsset.raw, the escape hatch. The one piece of public state callers actually need is FontAsset.family — the family name a Text's style should use.

Family-name derivation

Fonts are loaded under a family name derived from the file's basename with separators turned into spaces and words title-cased — e.g. press-start-2p.ttf becomes Press Start 2P. This matches PIXI's convention; pick filenames that produce a usable family name, or reach for Assets.load directly (via AssetLibrary.raw) when you need full control over @font-face descriptors.

Example

await game.assets.load('fonts/press-start-2p.ttf', { key: 'pixel' });
const pixel = game.assets.getAs('pixel', FontAsset);

new Text(host, 'Score: 0', { fontFamily: pixel, fontSize: 16 });

Constructors

#
constructor(key: string, namespace: string, src: string, _faces: FontFace | readonly FontFace[], family: string): FontAsset

Parameters

  • key string
  • namespace string
  • src string
  • _faces FontFace | readonly FontFace[]
  • family string

Properties

readonly #
family: string

The CSS family name the loaded face(s) registered under. This is what a Text style's fontFamily should match.

readonly #
key: string

The developer-facing name this asset is stored under within its Asset.namespace. Unique per namespace, not globally.

readonly #
namespace: string

The grouping this asset belongs to. The unit of bulk unloading via AssetLibrary.unloadNamespace.

readonly #
src: string

The resolved path the resource was loaded from. Also the underlying renderer's cache key, used to free the resource on unload.

readonly #
type: Font

Discriminant identifying which concrete Asset subclass this is. Branch on it to safely narrow to the payload-bearing subclass. See the class-level docs for the narrowing pattern.

Accessors

readonly #
raw: FontFace | readonly FontFace[]

Direct access to the underlying FontFace(s). A single-weight load exposes one FontFace; a multi-weight load exposes a read-only array with one entry per weight.

Use with care. raw is an intentional escape hatch for cases the arcade2d API doesn't cover — inspecting per-weight load status, unregistering a face from document.fonts ahead of an AssetLibrary.unload, feeding the family into a non-PIXI renderer. Code that touches raw is coupled to the browser's FontFace API and may break when arcade2d swaps the font loader.

None of those will be treated as breaking changes to arcade2d's own surface. Prefer FontAsset.family on this class; reach for raw only when no equivalent exists, and isolate the access behind your own helper so the coupling is in one place.

ESC