Remotion custom font loading

cssTag.ts

// utility, does nothing else than allow vs code to do CSS syntax highlighting when used
// Usage:
//   css`
//     .my-classname { background-color: red; }
//   `
export const css = (strings: TemplateStringsArray, ...values: any[]) => {
  let str = '';
  strings.forEach((string, i) => {
    str += string + (values[i] ?? '');
  });
  return str;
};

MyVideo.tsx

import React, { useEffect, useState } from 'react';
import {
  continueRender,
  delayRender,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';
import { css } from './utils/cssTag';

function logLoadedFonts() {
  const loadedFonts: string[] = [];
  document.fonts.forEach(({ family, variant, weight }) => {
    loadedFonts.push(`${family} ${weight} ${variant}`);
  });
  console.log(`Loaded fonts:\n${loadedFonts.join('\n')}`);
}

function useWaitForFontsToLoad() {
  const [waitForFontsHandle] = useState(() => delayRender());

  useEffect(() => {
    function handleLoadingDone() {
      logLoadedFonts();
      continueRender(waitForFontsHandle);
    }

    document.fonts.addEventListener('loadingdone', handleLoadingDone);

    return () => {
      document.fonts.removeEventListener('loadingdone', handleLoadingDone);
    };
  }, []);
}

export const MyVideo: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { width } = useVideoConfig();
  useWaitForFontsToLoad();

  const fontsCssSource = css`
    @import url('https://fonts.googleapis.com/css2?family=Bangers');
  `;

  const baseCss = css`
    /* somewhat stolen from https://github.com/sindresorhus/modern-normalize */

    *,
    ::before,
    ::after {
      box-sizing: border-box;
    }

    html {
      /* use a base size that scales with the composition width  */
      font-size: ${0.02 * width}px;

      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -moz-tab-size: 4;
      tab-size: 4;
    }

    body {
      margin: 0;
      font-family: system-ui,
        -apple-system /* Firefox supports this but not yet \`system-ui\` */,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji';
    }
  `;

  return (
    <>
      <style>{fontsCssSource}</style>
      <style>{baseCss}</style>
      <div
        style={{
          backgroundColor: 'lightblue',
          flex: 1,
          textAlign: 'center',
          fontSize: '3em',
          fontFamily: 'Bangers',
        }}
      >
        <p>{text}</p>
        <p>The current frame is {frame}.</p>
      </div>
    </>
  );
};