Hooks

Alongside its components, fontdue-js exports a handful of React hooks for the cases the prebuilt components don’t cover: loading a webfont yourself and knowing when it’s ready, reacting to a visitor’s cookie-consent choice, and sizing text to fit its container. Each is a hook you call from your own React component, imported from its own subpath. They’re independent of the provider – you can call them anywhere in a React tree – though useConsent reflects the consent state the provider’s banner manages.

useFont

useFont loads a webfont in the browser and tells you when it’s ready to paint, so you can render text in a font you fetched from the API without writing @font-face CSS by hand. It returns a style object to spread onto the element and a loaded flag, and falls back to a neutral face until the font arrives so the text never flashes in the wrong metrics.

import useFont from "fontdue-js/useFont";

function FontName({ family, sources }) {
  const { style, loaded } = useFont({ fontFamily: family, webfontSources: sources });
  return <span style={style}>{family}</span>;
}

It works two ways depending on whether you hand it the font’s sources. Pass webfontSources – the url/format pairs a font style query returns – and it loads them directly through the browser’s FontFace API, no stylesheet involved. Omit them and it instead watches for a font your own @font-face CSS is loading, resolving once the browser reports it ready.¹¹The fallback path keys off document.fonts, so it only sees a font your page actually declares in CSS – if neither webfontSources nor an @font-face rule names the family, loaded stays false. This is the hook the templates use to set a typeface’s own name in its own face; pairing it with hand-written @font-face for your page chrome is covered in Write your own @font-face CSS.

The result is { style, loaded }: style is a React style object – fontFamily, fontWeight, and fontStyle – to spread onto the element you’re rendering, and loaded is true once the font is ready.²²useFontStyle is a back-compatible alias of useFont under its former name. It behaves identically; prefer useFont in new code.

useConsent

useConsent reports whether the visitor has granted consent for a given category, and re-renders your component when that choice changes – when they accept or reject on the consent banner, the hook updates in place with no reload. Use it to hold back a script or an embed until the visitor has opted in.

import { useConsent } from "fontdue-js/useConsent";

function Analytics() {
  const allowed = useConsent("analytics");
  if (!allowed) return null;
  return <AnalyticsScript />;
}

The category is the consent group the script belongs to – "analytics", "marketing", and so on – matched against the categories the consent banner collects. Until the visitor has chosen, and during server rendering, the hook returns false, so the gated content stays out until consent is explicit.³³The server snapshot is always false; the real value resolves on the client after hydration. That keeps a consent-gated script from rendering into the server HTML before the visitor’s choice is known. Gating third-party scripts this way is walked through in Gate third-party scripts on consent.

It returns a single boolean – true when consent for that category is granted.

useAutofit

useAutofit sizes text to fill the width of its container on one line, recomputing as the container resizes. You attach the returned ref to the wrapping element and apply the returned fontSize to the text; the hook measures the text off-screen and picks the largest size between min and max that still fits.

import useAutofit from "fontdue-js/useAutofit";

function Headline({ text }) {
  const { ref, fontSize, ready } = useAutofit({
    text,
    fontFamily: "Tonka Display",
    fontSize: 120,
  });

  return (
    <div ref={ref}>
      <span
        style={{
          fontFamily: "Tonka Display",
          fontSize,
          visibility: ready ? "visible" : "hidden",
        }}
      >
        {text}
      </span>
    </div>
  );
}

fontSize is the initial size to start from; the hook only ever scales down from the width it measures, clamped to min and max. It re-measures whenever the container changes width or the font finishes loading, so the fit holds across breakpoints and once the real typeface replaces the fallback. ready is false until the first measurement lands – gate visibility on it, as above, to avoid a frame of mis-sized text.⁴⁴Measurement uses a canvas for static fonts and falls back to a hidden DOM element when fontVariationSettings is set, since variable-axis widths can’t be measured on a canvas. It’s the same fitting behind the Type Testers’ autofit option, exposed for your own headings and specimens.

The result is { ref, fontSize, ready }: attach ref to the container, apply fontSize to the text, and use ready to hold rendering until the first fit is measured.