fallbackFontFace

A @font-face for a locally installed font that stands in for the web font while it loads, scaled so its average character width matches the web font (size-adjust), and with its ascent, descent and line gap overridden in the same scale, so the line boxes do not change height when the web font arrives.

The formula: the web font's width is xWidthAvg / unitsPerEm; the fallback's is the same for its own metrics; size-adjust is the ratio of the two. The vertical overrides are the font's metrics divided by that ratio.

Import#

import { fallbackFontFace } from "@shadow-js/dusk";

Signature#

function fallbackFontFace(options: {
  readonly family: string;
  readonly local: string;
  readonly font: FontMetrics;
  readonly fallback: { readonly unitsPerEm: number; readonly xWidthAvg: number };
}): string

Parameters#

Returns#

The CSS rule.

Throws#

• RangeError for a metric that is not a positive number (a zero width would divide by zero).
• TypeError for a name that could break out of the CSS.

Examples#

fallbackFontFace({ family: "Inter fallback", local: "Arial", font: inter, fallback: { unitsPerEm: 2048, xWidthAvg: 904 } });