Remotion 3.2.40 - Dynamic font loading

GoogleFontText.tsx

import React, { useEffect, useState } from 'react';
import {
  AbsoluteFill,
  continueRender,
  delayRender
} from 'remotion';
import { getAvailableFonts } from '@remotion/google-fonts';

const availableFonts: {
  fontFamily: string;
  importName: string;
}[] = getAvailableFonts();

const baseSize = 40;

export const GoogleFontText: React.FC<{
  text: string;
  color: string;
  fontSize: number;
  fontWeight: string;
  fontFamily: string;
}> = ({
  text,
  color,
  fontSize,
  fontWeight,
  fontFamily,
}) => {
  const [handle] = useState(() => delayRender());
  const [remotionGoogleFont, setRemotionGoogleFont] = useState<any>(null);

  useEffect(() => {
    (async function maybeLoadGoogleFont() {
      const gFont = availableFonts.find(
        (font) => font.fontFamily === fontFamily
      );

      if (gFont) {
        const googleFont = await import(
          `@remotion/google-fonts/${gFont.importName}`
        );
        setRemotionGoogleFont(googleFont);
        await googleFont.loadFont();
        continueRender(handle);
      }
    })();
  }, [fontFamily]);

  return (
    <AbsoluteFill
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {remotionGoogleFont && (
        <style>{`@import url("${remotionGoogleFont.getInfo().url}");`}</style>
      )}
      <div
        style={{
          color,
          fontSize,
          fontWeight,
          fontFamily: `"${fontFamily}"`,
        }}
      >
        {text}
      </div>
    </AbsoluteFill>
  );
};