Skip to main content


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.


The Using fonts guide contains more information about loading fonts.


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


fontstringNoSpecifies 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).
frameMutableRefObject<HTMLIFrameElement>NoSpecifies the context for font (this is a reference to the frame element).
fallbackstringYesSpecifies 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.


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={{
Font {fontFamily} is {isFontLoading ? "loading" : "loaded"}!
<iframe ref={ref} />