onFontsLoaded

Registers a callback to run whenever the browser finishes loading a web font that d3plus has already measured text with — the moment any text laid out with that font’s fallback becomes stale. Returns a function that removes the callback.

Basic example

Text measured before a web font finishes downloading uses the fallback font’s metrics. onFontsLoaded runs its callback whenever the browser finishes loading a font that d3plus has already measured with, and returns a function that unsubscribes. Charts use it to redraw labels once their fonts arrive. Press the button to fetch a font from Google Fonts and watch the measured width change (this needs network access).

import {onFontsLoaded, textWidth} from "@d3plus/dom";

// Measured before the font arrives: the fallback font's width.
let width = textWidth("Sphinx of black quartz, judge my vow", {
  "font-family": "Lobster",
  "font-size": 20,
});

const stop = onFontsLoaded(() => {
  // Lobster has loaded, and the earlier measurement is stale.
  width = textWidth("Sphinx of black quartz, judge my vow", {
    "font-family": "Lobster",
    "font-size": 20,
  });
});

// Later, to stop listening:
stop();

Parameters

import {onFontsLoaded} from "@d3plus/dom";

callbackrequiredFunction

The function to run after the font loads.