Function useFontStatus

website/app/hooks/useIsFontLoaded.ts:99–158

(
	family: string,
	enabled = true,
	options?: ObserverOptions,
)

};

export const useFontStatus = (
	family: string,
	enabled = true,
	options?: ObserverOptions,
): FontStatus => {
	const fontFaces = useMemo<FontFace[]>(() => {
		if (!options?.weights || options.weights.length === 0) {
			return [{ family, style: options?.style ?? 'normal' }];
		}

		return options.weights.map((weight) => ({
			family,
			weight,
			style: options.style ?? 'normal',
		}));
	}, [family, options?.weights, options?.style]);

	const cacheKey = useMemo(() => JSON.stringify(fontFaces), [fontFaces]);

	// Load the font on mount or when font faces change.
	useEffect(() => {
		// Skip font loading during SSR or if the hook is not enabled.
		if (!isClient || !enabled) {
			return;
		}

		triggerFontLoad(cacheKey, fontFaces);
	}, [cacheKey, fontFaces, enabled]);

	const status = useSyncExternalStore(
		(callback) => {
			if (!subscribers.has(cacheKey)) {
				subscribers.set(cacheKey, new Set());
			}

			// biome-ignore lint/style/noNonNullAssertion: We check existence with .has().
			const specificSubscribers = subscribers.get(cacheKey)!;

			specificSubscribers.add(callback);

			return () => {
				specificSubscribers.delete(callback);

				// Clean up if no subscribers left.
				if (specificSubscribers.size === 0) {
					subscribers.delete(cacheKey);
				}
			};
		},
		() => fontStatusCache.get(cacheKey), // Client snapshot.
		() => undefined, // Server snapshot should always be undefined (no fonts loaded on server).
	);

	// If not enabled, the font is neither loading nor loaded yet.
	if (!enabled) {
		return undefined;
	}