Quickly inject a Google font into your Next app via "font" query parameter

useCustomizableFont.ts

import {useRouter} from 'next/router';
import {useEffect} from 'react';

// Small hack to inject a Google font into the webpage
function appendCustomFont(font: string) {
  if (typeof document === 'undefined') {
    return console.warn(
      '`window.document` unavailable: cannot append custom font.'
    );
  }

  const el = document.createElement('link');
  const uriFontFamily = font.split(' ').join('+');
  const cssFontFamily = font.split('+').join(' ');

  el.id = '__custom-font-loader';
  el.rel = 'stylesheet';
  el.href = `https://fonts.googleapis.com/css2?family=${uriFontFamily}:wght@200;300;400;500;600;700;800&display=swap`;

  const originalFontFamily = document.body.style.fontFamily;

  document.head.append(el);
  document.body.style.fontFamily = cssFontFamily;

  // Cleanup function to remove injected code above
  return () => {
    document.body.style.fontFamily = originalFontFamily;
    el.parentElement?.removeChild(el);
  };
}

export function useCustomizableFont() {
  const router = useRouter();

  useEffect(() => {
    if (!router.isReady) {
      return;
    }

    const font = router.query.font as string;

    if (!font) {
      return;
    }

    const undo = appendCustomFont(font);

    return undo;
  }, [router]);
}