useFontLoader

React Hook to load a font in an iframe using Google Web Font Loader. This hook can load local fonts, fonts from Google Fonts, or fonts from a custom domain.

tip

The Using fonts guide contains more information about loading fonts.

Signature

useFontLoader(
  font: string,
  frame: MutableRefObject<HTMLIFrameElement>,
  fallback?: string
): [boolean, string]

Parameters

Name	Type	Optional	Description
font	string	No	Specifies the font to load. This can be any font from Google Fonts. It is also possible to load a custom font (see the Using fonts guide for more information).
frame	MutableRefObject<HTMLIFrameElement>	No	Specifies the context for font (this is a reference to the frame element).
fallback	string	Yes	Specifies the fallback font to use when the font could not load.

Return value

Returns a tuple with a boolean value that indicates if the font is loading and a string that specifies the font-family name of the loaded font.

Example

import { useFontLoader } from "@tripetto/runner-fabric/fontloader";
import { useRef } from "react";

function App() {
  const ref = useRef<HTMLIFrameElement>(null);
  const [isFontLoading, fontFamily] = useFontLoader("Poppins", ref, "sans-serif");

  return (
    <>
      <span styles={{
        fontFamily
      }}>
        Font {fontFamily} is {isFontLoading ? "loading" : "loaded"}!
      </span>
      <iframe ref={ref} />
    </>
  );
}