Build a Google Font picker

To show various Google fonts in a font picker and load them once the user selects them, first install @remotion/google-fonts (at least v3.3.64).

This feature is only available if @remotion/google-fonts is imported as an ES Module.
If it is imported as a CommonJS module instead, loading a font will throw an error.

Call getAvailableFonts() to get a list of Google Fonts and call .load() to load the metadata of a font.
Afterwards, on the object you retrieve:

• You can call getInfo() to retrieve available styles and weights.
• You can call loadFont() to load the font itself.

Use the fontFamily CSS property to apply a font.

Remember that if you want to render a video with said font, you also need to load the font inside the Remotion video. You can do it in the same way, by looping through the available fonts, finding the font you want to load and then load it.

Show all fonts in a font picker

The following snippet renders a dropdown with all Google Fonts, and loads one it it has been selected. The list is approximately 1400 fonts.

tsx
import { getAvailableFonts } from "@remotion/google-fonts";
import React, { useCallback } from "react";
 
export const FontPicker: React.FC = () => {
  const newFonts = getAvailableFonts();
 
  const onChange = useCallback(
    async (e: React.ChangeEvent<HTMLSelectElement>) => {
      const fonts = newFonts[e.target.selectedIndex];
 
      // Load font information
      const loaded = await fonts.load();
 
      // Load the font itself
      const { fontFamily, ...otherInfo } = loaded.loadFont();
 
      // Or get metadata about the font
      const info = loaded.getInfo();
      const styles = Object.keys(info.fonts);
      console.log("Font", info.fontFamily, " Styles", styles);
      for (const style of styles) {
        const weightObject = info.fonts[style as keyof typeof info.fonts];
        const weights = Object.keys(weightObject);
        console.log("- Style", style, "supports weights", weights);
        for (const weight of weights) {
          const scripts = Object.keys(weightObject[weight]);
          console.log("-- Weight", weight, "supports scripts", scripts);
        }
      }
    },
    [newFonts],
  );
 
  return (
    <div>
      <select onChange={onChange}>
        {newFonts.map((f) => {
          return (
            <option key={f.importName} value={f.importName}>
              {f.fontFamily}
            </option>
          );
        })}
      </select>
    </div>
  );
};

Show only the 250 most popular Google Fonts

To reduce bundle size, you can limit the selection. Instead of calling getAvailableFonts(), create a file with the following contents and use it as the fonts array:

ts
import type { GoogleFont } from "@remotion/google-fonts";
 
export const top250 = [
  {
    family: "ABeeZee",
    load: () => import("@remotion/google-fonts/ABeeZee") as Promise<GoogleFont>,
  },
  {
    family: "Abel",
    load: () => import("@remotion/google-fonts/Abel") as Promise<GoogleFont>,
  },
  {
    family: "Abril Fatface",
    load: () =>
      import("@remotion/google-fonts/AbrilFatface") as Promise<GoogleFont>,
  },
  {
    family: "Acme",
    load: () => import("@remotion/google-fonts/Acme") as Promise<GoogleFont>,
  },
  {
    family: "Alata",
    load: () => import("@remotion/google-fonts/Alata") as Promise<GoogleFont>,
  },
  {
    family: "Albert Sans",
    load: () =>
      import("@remotion/google-fonts/AlbertSans") as Promise<GoogleFont>,
  },
  {
    family: "Alegreya",
    load: () =>
      import("@remotion/google-fonts/Alegreya") as Promise<GoogleFont>,
  },
  {
    family: "Alegreya Sans",
    load: () =>
      import("@remotion/google-fonts/AlegreyaSans") as Promise<GoogleFont>,
  },
  {
    family: "Alegreya Sans SC",
    load: () =>
      import("@remotion/google-fonts/AlegreyaSansSC") as Promise<GoogleFont>,
  },
  {
    family: "Alfa Slab One",
    load: () =>
      import("@remotion/google-fonts/AlfaSlabOne") as Promise<GoogleFont>,
  },
  {
    family: "Alice",
    load: () => import("@remotion/google-fonts/Alice") as Promise<GoogleFont>,
  },
  {
    family: "Almarai",
    load: () => import("@remotion/google-fonts/Almarai") as Promise<GoogleFont>,
  },
  {
    family: "Amatic SC",
    load: () =>
      import("@remotion/google-fonts/AmaticSC") as Promise<GoogleFont>,
  },
  {
    family: "Amiri",
    load: () => import("@remotion/google-fonts/Amiri") as Promise<GoogleFont>,
  },
  {
    family: "Antic Slab",
    load: () =>
      import("@remotion/google-fonts/AnticSlab") as Promise<GoogleFont>,
  },
  {
    family: "Anton",
    load: () => import("@remotion/google-fonts/Anton") as Promise<GoogleFont>,
  },
  {
    family: "Architects Daughter",
    load: () =>
      import(
        "@remotion/google-fonts/ArchitectsDaughter"
      ) as Promise<GoogleFont>,
  },
  {
    family: "Archivo",
    load: () => import("@remotion/google-fonts/Archivo") as Promise<GoogleFont>,
  },
  {
    family: "Archivo Black",
    load: () =>
      import("@remotion/google-fonts/ArchivoBlack") as Promise<GoogleFont>,
  },
  {
    family: "Archivo Narrow",
    load: () =>
      import("@remotion/google-fonts/ArchivoNarrow") as Promise<GoogleFont>,
  },
  {
    family: "Arimo",
    load: () => import("@remotion/google-fonts/Arimo") as Promise<GoogleFont>,
  },
  {
    family: "Arsenal",
    load: () => import("@remotion/google-fonts/Arsenal") as Promise<GoogleFont>,
  },
  {
    family: "Arvo",
    load: () => import("@remotion/google-fonts/Arvo") as Promise<GoogleFont>,
  },
  {
    family: "Asap",
    load: () => import("@remotion/google-fonts/Asap") as Promise<GoogleFont>,
  },
  {
    family: "Asap Condensed",
    load: () =>
      import("@remotion/google-fonts/AsapCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Assistant",
    load: () =>
      import("@remotion/google-fonts/Assistant") as Promise<GoogleFont>,
  },
  {
    family: "Barlow",
    load: () => import("@remotion/google-fonts/Barlow") as Promise<GoogleFont>,
  },
  {
    family: "Barlow Condensed",
    load: () =>
      import("@remotion/google-fonts/BarlowCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Barlow Semi Condensed",
    load: () =>
      import(
        "@remotion/google-fonts/BarlowSemiCondensed"
      ) as Promise<GoogleFont>,
  },
  {
    family: "Be Vietnam Pro",
    load: () =>
      import("@remotion/google-fonts/BeVietnamPro") as Promise<GoogleFont>,
  },
  {
    family: "Bebas Neue",
    load: () =>
      import("@remotion/google-fonts/BebasNeue") as Promise<GoogleFont>,
  },
  {
    family: "Bitter",
    load: () => import("@remotion/google-fonts/Bitter") as Promise<GoogleFont>,
  },
  {
    family: "Black Ops One",
    load: () =>
      import("@remotion/google-fonts/BlackOpsOne") as Promise<GoogleFont>,
  },
  {
    family: "Bodoni Moda",
    load: () =>
      import("@remotion/google-fonts/BodoniModa") as Promise<GoogleFont>,
  },
  {
    family: "Bree Serif",
    load: () =>
      import("@remotion/google-fonts/BreeSerif") as Promise<GoogleFont>,
  },
  {
    family: "Bungee",
    load: () => import("@remotion/google-fonts/Bungee") as Promise<GoogleFont>,
  },
  {
    family: "Cabin",
    load: () => import("@remotion/google-fonts/Cabin") as Promise<GoogleFont>,
  },
  {
    family: "Cairo",
    load: () => import("@remotion/google-fonts/Cairo") as Promise<GoogleFont>,
  },
  {
    family: "Cantarell",
    load: () =>
      import("@remotion/google-fonts/Cantarell") as Promise<GoogleFont>,
  },
  {
    family: "Cardo",
    load: () => import("@remotion/google-fonts/Cardo") as Promise<GoogleFont>,
  },
  {
    family: "Catamaran",
    load: () =>
      import("@remotion/google-fonts/Catamaran") as Promise<GoogleFont>,
  },
  {
    family: "Caveat",
    load: () => import("@remotion/google-fonts/Caveat") as Promise<GoogleFont>,
  },
  {
    family: "Chakra Petch",
    load: () =>
      import("@remotion/google-fonts/ChakraPetch") as Promise<GoogleFont>,
  },
  {
    family: "Changa",
    load: () => import("@remotion/google-fonts/Changa") as Promise<GoogleFont>,
  },
  {
    family: "Chivo",
    load: () => import("@remotion/google-fonts/Chivo") as Promise<GoogleFont>,
  },
  {
    family: "Cinzel",
    load: () => import("@remotion/google-fonts/Cinzel") as Promise<GoogleFont>,
  },
  {
    family: "Comfortaa",
    load: () =>
      import("@remotion/google-fonts/Comfortaa") as Promise<GoogleFont>,
  },
  {
    family: "Commissioner",
    load: () =>
      import("@remotion/google-fonts/Commissioner") as Promise<GoogleFont>,
  },
  {
    family: "Concert One",
    load: () =>
      import("@remotion/google-fonts/ConcertOne") as Promise<GoogleFont>,
  },
  {
    family: "Cookie",
    load: () => import("@remotion/google-fonts/Cookie") as Promise<GoogleFont>,
  },
  {
    family: "Cormorant",
    load: () =>
      import("@remotion/google-fonts/Cormorant") as Promise<GoogleFont>,
  },
  {
    family: "Cormorant Garamond",
    load: () =>
      import("@remotion/google-fonts/CormorantGaramond") as Promise<GoogleFont>,
  },
  {
    family: "Courgette",
    load: () =>
      import("@remotion/google-fonts/Courgette") as Promise<GoogleFont>,
  },
  {
    family: "Crete Round",
    load: () =>
      import("@remotion/google-fonts/CreteRound") as Promise<GoogleFont>,
  },
  {
    family: "Crimson Pro",
    load: () =>
      import("@remotion/google-fonts/CrimsonPro") as Promise<GoogleFont>,
  },
  {
    family: "Crimson Text",
    load: () =>
      import("@remotion/google-fonts/CrimsonText") as Promise<GoogleFont>,
  },
  {
    family: "Cuprum",
    load: () => import("@remotion/google-fonts/Cuprum") as Promise<GoogleFont>,
  },
  {
    family: "DM Sans",
    load: () => import("@remotion/google-fonts/DMSans") as Promise<GoogleFont>,
  },
  {
    family: "DM Serif Display",
    load: () =>
      import("@remotion/google-fonts/DMSerifDisplay") as Promise<GoogleFont>,
  },
  {
    family: "DM Serif Text",
    load: () =>
      import("@remotion/google-fonts/DMSerifText") as Promise<GoogleFont>,
  },
  {
    family: "Dancing Script",
    load: () =>
      import("@remotion/google-fonts/DancingScript") as Promise<GoogleFont>,
  },
  {
    family: "Didact Gothic",
    load: () =>
      import("@remotion/google-fonts/DidactGothic") as Promise<GoogleFont>,
  },
  {
    family: "Domine",
    load: () => import("@remotion/google-fonts/Domine") as Promise<GoogleFont>,
  },
  {
    family: "Dosis",
    load: () => import("@remotion/google-fonts/Dosis") as Promise<GoogleFont>,
  },
  {
    family: "EB Garamond",
    load: () =>
      import("@remotion/google-fonts/EBGaramond") as Promise<GoogleFont>,
  },
  {
    family: "Eczar",
    load: () => import("@remotion/google-fonts/Eczar") as Promise<GoogleFont>,
  },
  {
    family: "El Messiri",
    load: () =>
      import("@remotion/google-fonts/ElMessiri") as Promise<GoogleFont>,
  },
  {
    family: "Electrolize",
    load: () =>
      import("@remotion/google-fonts/Electrolize") as Promise<GoogleFont>,
  },
  {
    family: "Encode Sans",
    load: () =>
      import("@remotion/google-fonts/EncodeSans") as Promise<GoogleFont>,
  },
  {
    family: "Encode Sans Condensed",
    load: () =>
      import(
        "@remotion/google-fonts/EncodeSansCondensed"
      ) as Promise<GoogleFont>,
  },
  {
    family: "Exo",
    load: () => import("@remotion/google-fonts/Exo") as Promise<GoogleFont>,
  },
  {
    family: "Exo 2",
    load: () => import("@remotion/google-fonts/Exo2") as Promise<GoogleFont>,
  },
  {
    family: "Figtree",
    load: () => import("@remotion/google-fonts/Figtree") as Promise<GoogleFont>,
  },
  {
    family: "Fira Sans",
    load: () =>
      import("@remotion/google-fonts/FiraSans") as Promise<GoogleFont>,
  },
  {
    family: "Fira Sans Condensed",
    load: () =>
      import("@remotion/google-fonts/FiraSansCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Fjalla One",
    load: () =>
      import("@remotion/google-fonts/FjallaOne") as Promise<GoogleFont>,
  },
  {
    family: "Francois One",
    load: () =>
      import("@remotion/google-fonts/FrancoisOne") as Promise<GoogleFont>,
  },
  {
    family: "Frank Ruhl Libre",
    load: () =>
      import("@remotion/google-fonts/FrankRuhlLibre") as Promise<GoogleFont>,
  },
  {
    family: "Fraunces",
    load: () =>
      import("@remotion/google-fonts/Fraunces") as Promise<GoogleFont>,
  },
  {
    family: "Gelasio",
    load: () => import("@remotion/google-fonts/Gelasio") as Promise<GoogleFont>,
  },
  {
    family: "Gloria Hallelujah",
    load: () =>
      import("@remotion/google-fonts/GloriaHallelujah") as Promise<GoogleFont>,
  },
  {
    family: "Gothic A1",
    load: () =>
      import("@remotion/google-fonts/GothicA1") as Promise<GoogleFont>,
  },
  {
    family: "Great Vibes",
    load: () =>
      import("@remotion/google-fonts/GreatVibes") as Promise<GoogleFont>,
  },
  {
    family: "Gruppo",
    load: () => import("@remotion/google-fonts/Gruppo") as Promise<GoogleFont>,
  },
  {
    family: "Heebo",
    load: () => import("@remotion/google-fonts/Heebo") as Promise<GoogleFont>,
  },
  {
    family: "Hind",
    load: () => import("@remotion/google-fonts/Hind") as Promise<GoogleFont>,
  },
  {
    family: "Hind Madurai",
    load: () =>
      import("@remotion/google-fonts/HindMadurai") as Promise<GoogleFont>,
  },
  {
    family: "Hind Siliguri",
    load: () =>
      import("@remotion/google-fonts/HindSiliguri") as Promise<GoogleFont>,
  },
  {
    family: "IBM Plex Mono",
    load: () =>
      import("@remotion/google-fonts/IBMPlexMono") as Promise<GoogleFont>,
  },
  {
    family: "IBM Plex Sans",
    load: () =>
      import("@remotion/google-fonts/IBMPlexSans") as Promise<GoogleFont>,
  },
  {
    family: "IBM Plex Sans Arabic",
    load: () =>
      import("@remotion/google-fonts/IBMPlexSansArabic") as Promise<GoogleFont>,
  },
  {
    family: "IBM Plex Sans Condensed",
    load: () =>
      import(
        "@remotion/google-fonts/IBMPlexSansCondensed"
      ) as Promise<GoogleFont>,
  },
  {
    family: "IBM Plex Serif",
    load: () =>
      import("@remotion/google-fonts/IBMPlexSerif") as Promise<GoogleFont>,
  },
  {
    family: "Inconsolata",
    load: () =>
      import("@remotion/google-fonts/Inconsolata") as Promise<GoogleFont>,
  },
  {
    family: "Indie Flower",
    load: () =>
      import("@remotion/google-fonts/IndieFlower") as Promise<GoogleFont>,
  },
  {
    family: "Inter",
    load: () => import("@remotion/google-fonts/Inter") as Promise<GoogleFont>,
  },
  {
    family: "Inter Tight",
    load: () =>
      import("@remotion/google-fonts/InterTight") as Promise<GoogleFont>,
  },
  {
    family: "Josefin Sans",
    load: () =>
      import("@remotion/google-fonts/JosefinSans") as Promise<GoogleFont>,
  },
  {
    family: "Josefin Slab",
    load: () =>
      import("@remotion/google-fonts/JosefinSlab") as Promise<GoogleFont>,
  },
  {
    family: "Jost",
    load: () => import("@remotion/google-fonts/Jost") as Promise<GoogleFont>,
  },
  {
    family: "Kalam",
    load: () => import("@remotion/google-fonts/Kalam") as Promise<GoogleFont>,
  },
  {
    family: "Kanit",
    load: () => import("@remotion/google-fonts/Kanit") as Promise<GoogleFont>,
  },
  {
    family: "Karla",
    load: () => import("@remotion/google-fonts/Karla") as Promise<GoogleFont>,
  },
  {
    family: "Kaushan Script",
    load: () =>
      import("@remotion/google-fonts/KaushanScript") as Promise<GoogleFont>,
  },
  {
    family: "Khand",
    load: () => import("@remotion/google-fonts/Khand") as Promise<GoogleFont>,
  },
  {
    family: "Lato",
    load: () => import("@remotion/google-fonts/Lato") as Promise<GoogleFont>,
  },
  {
    family: "League Spartan",
    load: () =>
      import("@remotion/google-fonts/LeagueSpartan") as Promise<GoogleFont>,
  },
  {
    family: "Lexend",
    load: () => import("@remotion/google-fonts/Lexend") as Promise<GoogleFont>,
  },
  {
    family: "Lexend Deca",
    load: () =>
      import("@remotion/google-fonts/LexendDeca") as Promise<GoogleFont>,
  },
  {
    family: "Libre Barcode 39",
    load: () =>
      import("@remotion/google-fonts/LibreBarcode39") as Promise<GoogleFont>,
  },
  {
    family: "Libre Baskerville",
    load: () =>
      import("@remotion/google-fonts/LibreBaskerville") as Promise<GoogleFont>,
  },
  {
    family: "Libre Caslon Text",
    load: () =>
      import("@remotion/google-fonts/LibreCaslonText") as Promise<GoogleFont>,
  },
  {
    family: "Libre Franklin",
    load: () =>
      import("@remotion/google-fonts/LibreFranklin") as Promise<GoogleFont>,
  },
  {
    family: "Lilita One",
    load: () =>
      import("@remotion/google-fonts/LilitaOne") as Promise<GoogleFont>,
  },
  {
    family: "Lobster",
    load: () => import("@remotion/google-fonts/Lobster") as Promise<GoogleFont>,
  },
  {
    family: "Lobster Two",
    load: () =>
      import("@remotion/google-fonts/LobsterTwo") as Promise<GoogleFont>,
  },
  {
    family: "Lora",
    load: () => import("@remotion/google-fonts/Lora") as Promise<GoogleFont>,
  },
  {
    family: "Luckiest Guy",
    load: () =>
      import("@remotion/google-fonts/LuckiestGuy") as Promise<GoogleFont>,
  },
  {
    family: "M PLUS 1p",
    load: () => import("@remotion/google-fonts/MPLUS1p") as Promise<GoogleFont>,
  },
  {
    family: "M PLUS Rounded 1c",
    load: () =>
      import("@remotion/google-fonts/MPLUSRounded1c") as Promise<GoogleFont>,
  },
  {
    family: "Macondo",
    load: () => import("@remotion/google-fonts/Macondo") as Promise<GoogleFont>,
  },
  {
    family: "Manrope",
    load: () => import("@remotion/google-fonts/Manrope") as Promise<GoogleFont>,
  },
  {
    family: "Marcellus",
    load: () =>
      import("@remotion/google-fonts/Marcellus") as Promise<GoogleFont>,
  },
  {
    family: "Martel",
    load: () => import("@remotion/google-fonts/Martel") as Promise<GoogleFont>,
  },
  {
    family: "Mate",
    load: () => import("@remotion/google-fonts/Mate") as Promise<GoogleFont>,
  },
  {
    family: "Mate SC",
    load: () => import("@remotion/google-fonts/MateSC") as Promise<GoogleFont>,
  },
  {
    family: "Maven Pro",
    load: () =>
      import("@remotion/google-fonts/MavenPro") as Promise<GoogleFont>,
  },
  {
    family: "Merienda",
    load: () =>
      import("@remotion/google-fonts/Merienda") as Promise<GoogleFont>,
  },
  {
    family: "Merriweather",
    load: () =>
      import("@remotion/google-fonts/Merriweather") as Promise<GoogleFont>,
  },
  {
    family: "Merriweather Sans",
    load: () =>
      import("@remotion/google-fonts/MerriweatherSans") as Promise<GoogleFont>,
  },
  {
    family: "Montserrat",
    load: () =>
      import("@remotion/google-fonts/Montserrat") as Promise<GoogleFont>,
  },
  {
    family: "Montserrat Alternates",
    load: () =>
      import(
        "@remotion/google-fonts/MontserratAlternates"
      ) as Promise<GoogleFont>,
  },
  {
    family: "Mukta",
    load: () => import("@remotion/google-fonts/Mukta") as Promise<GoogleFont>,
  },
  {
    family: "Mulish",
    load: () => import("@remotion/google-fonts/Mulish") as Promise<GoogleFont>,
  },
  {
    family: "Nanum Gothic",
    load: () =>
      import("@remotion/google-fonts/NanumGothic") as Promise<GoogleFont>,
  },
  {
    family: "Nanum Gothic Coding",
    load: () =>
      import("@remotion/google-fonts/NanumGothicCoding") as Promise<GoogleFont>,
  },
  {
    family: "Nanum Myeongjo",
    load: () =>
      import("@remotion/google-fonts/NanumMyeongjo") as Promise<GoogleFont>,
  },
  {
    family: "Neuton",
    load: () => import("@remotion/google-fonts/Neuton") as Promise<GoogleFont>,
  },
  {
    family: "Noticia Text",
    load: () =>
      import("@remotion/google-fonts/NoticiaText") as Promise<GoogleFont>,
  },
  {
    family: "Noto Color Emoji",
    load: () =>
      import("@remotion/google-fonts/NotoColorEmoji") as Promise<GoogleFont>,
  },
  {
    family: "Noto Kufi Arabic",
    load: () =>
      import("@remotion/google-fonts/NotoKufiArabic") as Promise<GoogleFont>,
  },
  {
    family: "Noto Naskh Arabic",
    load: () =>
      import("@remotion/google-fonts/NotoNaskhArabic") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans",
    load: () =>
      import("@remotion/google-fonts/NotoSans") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans Arabic",
    load: () =>
      import("@remotion/google-fonts/NotoSansArabic") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans Bengali",
    load: () =>
      import("@remotion/google-fonts/NotoSansBengali") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans Display",
    load: () =>
      import("@remotion/google-fonts/NotoSansDisplay") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans HK",
    load: () =>
      import("@remotion/google-fonts/NotoSansHK") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans JP",
    load: () =>
      import("@remotion/google-fonts/NotoSansJP") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans KR",
    load: () =>
      import("@remotion/google-fonts/NotoSansKR") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans Mono",
    load: () =>
      import("@remotion/google-fonts/NotoSansMono") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans SC",
    load: () =>
      import("@remotion/google-fonts/NotoSansSC") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans TC",
    load: () =>
      import("@remotion/google-fonts/NotoSansTC") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans Thai",
    load: () =>
      import("@remotion/google-fonts/NotoSansThai") as Promise<GoogleFont>,
  },
  {
    family: "Noto Serif",
    load: () =>
      import("@remotion/google-fonts/NotoSerif") as Promise<GoogleFont>,
  },
  {
    family: "Noto Serif JP",
    load: () =>
      import("@remotion/google-fonts/NotoSerifJP") as Promise<GoogleFont>,
  },
  {
    family: "Noto Serif KR",
    load: () =>
      import("@remotion/google-fonts/NotoSerifKR") as Promise<GoogleFont>,
  },
  {
    family: "Noto Serif TC",
    load: () =>
      import("@remotion/google-fonts/NotoSerifTC") as Promise<GoogleFont>,
  },
  {
    family: "Nunito",
    load: () => import("@remotion/google-fonts/Nunito") as Promise<GoogleFont>,
  },
  {
    family: "Nunito Sans",
    load: () =>
      import("@remotion/google-fonts/NunitoSans") as Promise<GoogleFont>,
  },
  {
    family: "Old Standard TT",
    load: () =>
      import("@remotion/google-fonts/OldStandardTT") as Promise<GoogleFont>,
  },
  {
    family: "Oleo Script",
    load: () =>
      import("@remotion/google-fonts/OleoScript") as Promise<GoogleFont>,
  },
  {
    family: "Open Sans",
    load: () =>
      import("@remotion/google-fonts/OpenSans") as Promise<GoogleFont>,
  },
  {
    family: "Orbitron",
    load: () =>
      import("@remotion/google-fonts/Orbitron") as Promise<GoogleFont>,
  },
  {
    family: "Oswald",
    load: () => import("@remotion/google-fonts/Oswald") as Promise<GoogleFont>,
  },
  {
    family: "Outfit",
    load: () => import("@remotion/google-fonts/Outfit") as Promise<GoogleFont>,
  },
  {
    family: "Overpass",
    load: () =>
      import("@remotion/google-fonts/Overpass") as Promise<GoogleFont>,
  },
  {
    family: "Oxygen",
    load: () => import("@remotion/google-fonts/Oxygen") as Promise<GoogleFont>,
  },
  {
    family: "PT Sans",
    load: () => import("@remotion/google-fonts/PTSans") as Promise<GoogleFont>,
  },
  {
    family: "PT Sans Caption",
    load: () =>
      import("@remotion/google-fonts/PTSansCaption") as Promise<GoogleFont>,
  },
  {
    family: "PT Sans Narrow",
    load: () =>
      import("@remotion/google-fonts/PTSansNarrow") as Promise<GoogleFont>,
  },
  {
    family: "PT Serif",
    load: () => import("@remotion/google-fonts/PTSerif") as Promise<GoogleFont>,
  },
  {
    family: "Pacifico",
    load: () =>
      import("@remotion/google-fonts/Pacifico") as Promise<GoogleFont>,
  },
  {
    family: "Passion One",
    load: () =>
      import("@remotion/google-fonts/PassionOne") as Promise<GoogleFont>,
  },
  {
    family: "Pathway Gothic One",
    load: () =>
      import("@remotion/google-fonts/PathwayGothicOne") as Promise<GoogleFont>,
  },
  {
    family: "Patua One",
    load: () =>
      import("@remotion/google-fonts/PatuaOne") as Promise<GoogleFont>,
  },
  {
    family: "Paytone One",
    load: () =>
      import("@remotion/google-fonts/PaytoneOne") as Promise<GoogleFont>,
  },
  {
    family: "Permanent Marker",
    load: () =>
      import("@remotion/google-fonts/PermanentMarker") as Promise<GoogleFont>,
  },
  {
    family: "Philosopher",
    load: () =>
      import("@remotion/google-fonts/Philosopher") as Promise<GoogleFont>,
  },
  {
    family: "Play",
    load: () => import("@remotion/google-fonts/Play") as Promise<GoogleFont>,
  },
  {
    family: "Playfair Display",
    load: () =>
      import("@remotion/google-fonts/PlayfairDisplay") as Promise<GoogleFont>,
  },
  {
    family: "Plus Jakarta Sans",
    load: () =>
      import("@remotion/google-fonts/PlusJakartaSans") as Promise<GoogleFont>,
  },
  {
    family: "Poppins",
    load: () => import("@remotion/google-fonts/Poppins") as Promise<GoogleFont>,
  },
  {
    family: "Prata",
    load: () => import("@remotion/google-fonts/Prata") as Promise<GoogleFont>,
  },
  {
    family: "Prompt",
    load: () => import("@remotion/google-fonts/Prompt") as Promise<GoogleFont>,
  },
  {
    family: "Public Sans",
    load: () =>
      import("@remotion/google-fonts/PublicSans") as Promise<GoogleFont>,
  },
  {
    family: "Quattrocento",
    load: () =>
      import("@remotion/google-fonts/Quattrocento") as Promise<GoogleFont>,
  },
  {
    family: "Quattrocento Sans",
    load: () =>
      import("@remotion/google-fonts/QuattrocentoSans") as Promise<GoogleFont>,
  },
  {
    family: "Questrial",
    load: () =>
      import("@remotion/google-fonts/Questrial") as Promise<GoogleFont>,
  },
  {
    family: "Quicksand",
    load: () =>
      import("@remotion/google-fonts/Quicksand") as Promise<GoogleFont>,
  },
  {
    family: "Rajdhani",
    load: () =>
      import("@remotion/google-fonts/Rajdhani") as Promise<GoogleFont>,
  },
  {
    family: "Raleway",
    load: () => import("@remotion/google-fonts/Raleway") as Promise<GoogleFont>,
  },
  {
    family: "Readex Pro",
    load: () =>
      import("@remotion/google-fonts/ReadexPro") as Promise<GoogleFont>,
  },
  {
    family: "Red Hat Display",
    load: () =>
      import("@remotion/google-fonts/RedHatDisplay") as Promise<GoogleFont>,
  },
  {
    family: "Righteous",
    load: () =>
      import("@remotion/google-fonts/Righteous") as Promise<GoogleFont>,
  },
  {
    family: "Roboto",
    load: () => import("@remotion/google-fonts/Roboto") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Condensed",
    load: () =>
      import("@remotion/google-fonts/RobotoCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Flex",
    load: () =>
      import("@remotion/google-fonts/RobotoFlex") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Mono",
    load: () =>
      import("@remotion/google-fonts/RobotoMono") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Serif",
    load: () =>
      import("@remotion/google-fonts/RobotoSerif") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Slab",
    load: () =>
      import("@remotion/google-fonts/RobotoSlab") as Promise<GoogleFont>,
  },
  {
    family: "Rokkitt",
    load: () => import("@remotion/google-fonts/Rokkitt") as Promise<GoogleFont>,
  },
  {
    family: "Rowdies",
    load: () => import("@remotion/google-fonts/Rowdies") as Promise<GoogleFont>,
  },
  {
    family: "Rubik",
    load: () => import("@remotion/google-fonts/Rubik") as Promise<GoogleFont>,
  },
  {
    family: "Rubik Bubbles",
    load: () =>
      import("@remotion/google-fonts/RubikBubbles") as Promise<GoogleFont>,
  },
  {
    family: "Rubik Mono One",
    load: () =>
      import("@remotion/google-fonts/RubikMonoOne") as Promise<GoogleFont>,
  },
  {
    family: "Russo One",
    load: () =>
      import("@remotion/google-fonts/RussoOne") as Promise<GoogleFont>,
  },
  {
    family: "Sacramento",
    load: () =>
      import("@remotion/google-fonts/Sacramento") as Promise<GoogleFont>,
  },
  {
    family: "Saira",
    load: () => import("@remotion/google-fonts/Saira") as Promise<GoogleFont>,
  },
  {
    family: "Saira Condensed",
    load: () =>
      import("@remotion/google-fonts/SairaCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Sarabun",
    load: () => import("@remotion/google-fonts/Sarabun") as Promise<GoogleFont>,
  },
  {
    family: "Satisfy",
    load: () => import("@remotion/google-fonts/Satisfy") as Promise<GoogleFont>,
  },
  {
    family: "Sawarabi Gothic",
    load: () =>
      import("@remotion/google-fonts/SawarabiGothic") as Promise<GoogleFont>,
  },
  {
    family: "Sawarabi Mincho",
    load: () =>
      import("@remotion/google-fonts/SawarabiMincho") as Promise<GoogleFont>,
  },
  {
    family: "Sen",
    load: () => import("@remotion/google-fonts/Sen") as Promise<GoogleFont>,
  },
  {
    family: "Shadows Into Light",
    load: () =>
      import("@remotion/google-fonts/ShadowsIntoLight") as Promise<GoogleFont>,
  },
  {
    family: "Signika",
    load: () => import("@remotion/google-fonts/Signika") as Promise<GoogleFont>,
  },
  {
    family: "Signika Negative",
    load: () =>
      import("@remotion/google-fonts/SignikaNegative") as Promise<GoogleFont>,
  },
  {
    family: "Silkscreen",
    load: () =>
      import("@remotion/google-fonts/Silkscreen") as Promise<GoogleFont>,
  },
  {
    family: "Six Caps",
    load: () => import("@remotion/google-fonts/SixCaps") as Promise<GoogleFont>,
  },
  {
    family: "Slabo 27px",
    load: () =>
      import("@remotion/google-fonts/Slabo27px") as Promise<GoogleFont>,
  },
  {
    family: "Sora",
    load: () => import("@remotion/google-fonts/Sora") as Promise<GoogleFont>,
  },
  {
    family: "Source Code Pro",
    load: () =>
      import("@remotion/google-fonts/SourceCodePro") as Promise<GoogleFont>,
  },
  {
    family: "Source Sans 3",
    load: () =>
      import("@remotion/google-fonts/SourceSans3") as Promise<GoogleFont>,
  },
  {
    family: "Source Serif 4",
    load: () =>
      import("@remotion/google-fonts/SourceSerif4") as Promise<GoogleFont>,
  },
  {
    family: "Space Grotesk",
    load: () =>
      import("@remotion/google-fonts/SpaceGrotesk") as Promise<GoogleFont>,
  },
  {
    family: "Space Mono",
    load: () =>
      import("@remotion/google-fonts/SpaceMono") as Promise<GoogleFont>,
  },
  {
    family: "Special Elite",
    load: () =>
      import("@remotion/google-fonts/SpecialElite") as Promise<GoogleFont>,
  },
  {
    family: "Spectral",
    load: () =>
      import("@remotion/google-fonts/Spectral") as Promise<GoogleFont>,
  },
  {
    family: "Tajawal",
    load: () => import("@remotion/google-fonts/Tajawal") as Promise<GoogleFont>,
  },
  {
    family: "Tangerine",
    load: () =>
      import("@remotion/google-fonts/Tangerine") as Promise<GoogleFont>,
  },
  {
    family: "Teko",
    load: () => import("@remotion/google-fonts/Teko") as Promise<GoogleFont>,
  },
  {
    family: "Tinos",
    load: () => import("@remotion/google-fonts/Tinos") as Promise<GoogleFont>,
  },
  {
    family: "Titan One",
    load: () =>
      import("@remotion/google-fonts/TitanOne") as Promise<GoogleFont>,
  },
  {
    family: "Titillium Web",
    load: () =>
      import("@remotion/google-fonts/TitilliumWeb") as Promise<GoogleFont>,
  },
  {
    family: "Ubuntu",
    load: () => import("@remotion/google-fonts/Ubuntu") as Promise<GoogleFont>,
  },
  {
    family: "Ubuntu Condensed",
    load: () =>
      import("@remotion/google-fonts/UbuntuCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Ubuntu Mono",
    load: () =>
      import("@remotion/google-fonts/UbuntuMono") as Promise<GoogleFont>,
  },
  {
    family: "Unbounded",
    load: () =>
      import("@remotion/google-fonts/Unbounded") as Promise<GoogleFont>,
  },
  {
    family: "Unna",
    load: () => import("@remotion/google-fonts/Unna") as Promise<GoogleFont>,
  },
  {
    family: "Urbanist",
    load: () =>
      import("@remotion/google-fonts/Urbanist") as Promise<GoogleFont>,
  },
  {
    family: "Varela Round",
    load: () =>
      import("@remotion/google-fonts/VarelaRound") as Promise<GoogleFont>,
  },
  {
    family: "Vollkorn",
    load: () =>
      import("@remotion/google-fonts/Vollkorn") as Promise<GoogleFont>,
  },
  {
    family: "Work Sans",
    load: () =>
      import("@remotion/google-fonts/WorkSans") as Promise<GoogleFont>,
  },
  {
    family: "Yanone Kaffeesatz",
    load: () =>
      import("@remotion/google-fonts/YanoneKaffeesatz") as Promise<GoogleFont>,
  },
  {
    family: "Yantramanav",
    load: () =>
      import("@remotion/google-fonts/Yantramanav") as Promise<GoogleFont>,
  },
  {
    family: "Yellowtail",
    load: () =>
      import("@remotion/google-fonts/Yellowtail") as Promise<GoogleFont>,
  },
  {
    family: "Yeseva One",
    load: () =>
      import("@remotion/google-fonts/YesevaOne") as Promise<GoogleFont>,
  },
  {
    family: "Zen Kaku Gothic New",
    load: () =>
      import("@remotion/google-fonts/ZenKakuGothicNew") as Promise<GoogleFont>,
  },
  {
    family: "Zeyada",
    load: () => import("@remotion/google-fonts/Zeyada") as Promise<GoogleFont>,
  },
  {
    family: "Zilla Slab",
    load: () =>
      import("@remotion/google-fonts/ZillaSlab") as Promise<GoogleFont>,
  },
];

Show only the 100 most popular Google Fonts

To reduce bundle size, you can limit the selection. Instead of calling getAvailableFonts(), create a file with the following contents and use it as the fonts array:

ts
import type { GoogleFont } from "@remotion/google-fonts";
 
export const top100 = [
  {
    family: "Abel",
    load: () => import("@remotion/google-fonts/Abel") as Promise<GoogleFont>,
  },
  {
    family: "Anton",
    load: () => import("@remotion/google-fonts/Anton") as Promise<GoogleFont>,
  },
  {
    family: "Archivo",
    load: () => import("@remotion/google-fonts/Archivo") as Promise<GoogleFont>,
  },
  {
    family: "Arimo",
    load: () => import("@remotion/google-fonts/Arimo") as Promise<GoogleFont>,
  },
  {
    family: "Arvo",
    load: () => import("@remotion/google-fonts/Arvo") as Promise<GoogleFont>,
  },
  {
    family: "Asap",
    load: () => import("@remotion/google-fonts/Asap") as Promise<GoogleFont>,
  },
  {
    family: "Assistant",
    load: () =>
      import("@remotion/google-fonts/Assistant") as Promise<GoogleFont>,
  },
  {
    family: "Barlow",
    load: () => import("@remotion/google-fonts/Barlow") as Promise<GoogleFont>,
  },
  {
    family: "Barlow Condensed",
    load: () =>
      import("@remotion/google-fonts/BarlowCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Barlow Semi Condensed",
    load: () =>
      import(
        "@remotion/google-fonts/BarlowSemiCondensed"
      ) as Promise<GoogleFont>,
  },
  {
    family: "Bebas Neue",
    load: () =>
      import("@remotion/google-fonts/BebasNeue") as Promise<GoogleFont>,
  },
  {
    family: "Bitter",
    load: () => import("@remotion/google-fonts/Bitter") as Promise<GoogleFont>,
  },
  {
    family: "Cabin",
    load: () => import("@remotion/google-fonts/Cabin") as Promise<GoogleFont>,
  },
  {
    family: "Cairo",
    load: () => import("@remotion/google-fonts/Cairo") as Promise<GoogleFont>,
  },
  {
    family: "Caveat",
    load: () => import("@remotion/google-fonts/Caveat") as Promise<GoogleFont>,
  },
  {
    family: "Chakra Petch",
    load: () =>
      import("@remotion/google-fonts/ChakraPetch") as Promise<GoogleFont>,
  },
  {
    family: "Comfortaa",
    load: () =>
      import("@remotion/google-fonts/Comfortaa") as Promise<GoogleFont>,
  },
  {
    family: "Cormorant Garamond",
    load: () =>
      import("@remotion/google-fonts/CormorantGaramond") as Promise<GoogleFont>,
  },
  {
    family: "Crimson Text",
    load: () =>
      import("@remotion/google-fonts/CrimsonText") as Promise<GoogleFont>,
  },
  {
    family: "DM Sans",
    load: () => import("@remotion/google-fonts/DMSans") as Promise<GoogleFont>,
  },
  {
    family: "Dancing Script",
    load: () =>
      import("@remotion/google-fonts/DancingScript") as Promise<GoogleFont>,
  },
  {
    family: "Dosis",
    load: () => import("@remotion/google-fonts/Dosis") as Promise<GoogleFont>,
  },
  {
    family: "EB Garamond",
    load: () =>
      import("@remotion/google-fonts/EBGaramond") as Promise<GoogleFont>,
  },
  {
    family: "Exo 2",
    load: () => import("@remotion/google-fonts/Exo2") as Promise<GoogleFont>,
  },
  {
    family: "Figtree",
    load: () => import("@remotion/google-fonts/Figtree") as Promise<GoogleFont>,
  },
  {
    family: "Fira Sans",
    load: () =>
      import("@remotion/google-fonts/FiraSans") as Promise<GoogleFont>,
  },
  {
    family: "Fira Sans Condensed",
    load: () =>
      import("@remotion/google-fonts/FiraSansCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Fjalla One",
    load: () =>
      import("@remotion/google-fonts/FjallaOne") as Promise<GoogleFont>,
  },
  {
    family: "Heebo",
    load: () => import("@remotion/google-fonts/Heebo") as Promise<GoogleFont>,
  },
  {
    family: "Hind",
    load: () => import("@remotion/google-fonts/Hind") as Promise<GoogleFont>,
  },
  {
    family: "Hind Siliguri",
    load: () =>
      import("@remotion/google-fonts/HindSiliguri") as Promise<GoogleFont>,
  },
  {
    family: "IBM Plex Mono",
    load: () =>
      import("@remotion/google-fonts/IBMPlexMono") as Promise<GoogleFont>,
  },
  {
    family: "IBM Plex Sans",
    load: () =>
      import("@remotion/google-fonts/IBMPlexSans") as Promise<GoogleFont>,
  },
  {
    family: "Inconsolata",
    load: () =>
      import("@remotion/google-fonts/Inconsolata") as Promise<GoogleFont>,
  },
  {
    family: "Inter",
    load: () => import("@remotion/google-fonts/Inter") as Promise<GoogleFont>,
  },
  {
    family: "Josefin Sans",
    load: () =>
      import("@remotion/google-fonts/JosefinSans") as Promise<GoogleFont>,
  },
  {
    family: "Jost",
    load: () => import("@remotion/google-fonts/Jost") as Promise<GoogleFont>,
  },
  {
    family: "Kanit",
    load: () => import("@remotion/google-fonts/Kanit") as Promise<GoogleFont>,
  },
  {
    family: "Karla",
    load: () => import("@remotion/google-fonts/Karla") as Promise<GoogleFont>,
  },
  {
    family: "Lato",
    load: () => import("@remotion/google-fonts/Lato") as Promise<GoogleFont>,
  },
  {
    family: "Lexend",
    load: () => import("@remotion/google-fonts/Lexend") as Promise<GoogleFont>,
  },
  {
    family: "Libre Baskerville",
    load: () =>
      import("@remotion/google-fonts/LibreBaskerville") as Promise<GoogleFont>,
  },
  {
    family: "Libre Franklin",
    load: () =>
      import("@remotion/google-fonts/LibreFranklin") as Promise<GoogleFont>,
  },
  {
    family: "Lobster",
    load: () => import("@remotion/google-fonts/Lobster") as Promise<GoogleFont>,
  },
  {
    family: "Lora",
    load: () => import("@remotion/google-fonts/Lora") as Promise<GoogleFont>,
  },
  {
    family: "M PLUS Rounded 1c",
    load: () =>
      import("@remotion/google-fonts/MPLUSRounded1c") as Promise<GoogleFont>,
  },
  {
    family: "Manrope",
    load: () => import("@remotion/google-fonts/Manrope") as Promise<GoogleFont>,
  },
  {
    family: "Maven Pro",
    load: () =>
      import("@remotion/google-fonts/MavenPro") as Promise<GoogleFont>,
  },
  {
    family: "Merriweather",
    load: () =>
      import("@remotion/google-fonts/Merriweather") as Promise<GoogleFont>,
  },
  {
    family: "Montserrat",
    load: () =>
      import("@remotion/google-fonts/Montserrat") as Promise<GoogleFont>,
  },
  {
    family: "Mukta",
    load: () => import("@remotion/google-fonts/Mukta") as Promise<GoogleFont>,
  },
  {
    family: "Mulish",
    load: () => import("@remotion/google-fonts/Mulish") as Promise<GoogleFont>,
  },
  {
    family: "Nanum Gothic",
    load: () =>
      import("@remotion/google-fonts/NanumGothic") as Promise<GoogleFont>,
  },
  {
    family: "Noto Color Emoji",
    load: () =>
      import("@remotion/google-fonts/NotoColorEmoji") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans",
    load: () =>
      import("@remotion/google-fonts/NotoSans") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans Arabic",
    load: () =>
      import("@remotion/google-fonts/NotoSansArabic") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans HK",
    load: () =>
      import("@remotion/google-fonts/NotoSansHK") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans JP",
    load: () =>
      import("@remotion/google-fonts/NotoSansJP") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans KR",
    load: () =>
      import("@remotion/google-fonts/NotoSansKR") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans SC",
    load: () =>
      import("@remotion/google-fonts/NotoSansSC") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans TC",
    load: () =>
      import("@remotion/google-fonts/NotoSansTC") as Promise<GoogleFont>,
  },
  {
    family: "Noto Serif",
    load: () =>
      import("@remotion/google-fonts/NotoSerif") as Promise<GoogleFont>,
  },
  {
    family: "Noto Serif JP",
    load: () =>
      import("@remotion/google-fonts/NotoSerifJP") as Promise<GoogleFont>,
  },
  {
    family: "Nunito",
    load: () => import("@remotion/google-fonts/Nunito") as Promise<GoogleFont>,
  },
  {
    family: "Nunito Sans",
    load: () =>
      import("@remotion/google-fonts/NunitoSans") as Promise<GoogleFont>,
  },
  {
    family: "Open Sans",
    load: () =>
      import("@remotion/google-fonts/OpenSans") as Promise<GoogleFont>,
  },
  {
    family: "Oswald",
    load: () => import("@remotion/google-fonts/Oswald") as Promise<GoogleFont>,
  },
  {
    family: "Outfit",
    load: () => import("@remotion/google-fonts/Outfit") as Promise<GoogleFont>,
  },
  {
    family: "Overpass",
    load: () =>
      import("@remotion/google-fonts/Overpass") as Promise<GoogleFont>,
  },
  {
    family: "Oxygen",
    load: () => import("@remotion/google-fonts/Oxygen") as Promise<GoogleFont>,
  },
  {
    family: "PT Sans",
    load: () => import("@remotion/google-fonts/PTSans") as Promise<GoogleFont>,
  },
  {
    family: "PT Sans Narrow",
    load: () =>
      import("@remotion/google-fonts/PTSansNarrow") as Promise<GoogleFont>,
  },
  {
    family: "PT Serif",
    load: () => import("@remotion/google-fonts/PTSerif") as Promise<GoogleFont>,
  },
  {
    family: "Pacifico",
    load: () =>
      import("@remotion/google-fonts/Pacifico") as Promise<GoogleFont>,
  },
  {
    family: "Play",
    load: () => import("@remotion/google-fonts/Play") as Promise<GoogleFont>,
  },
  {
    family: "Playfair Display",
    load: () =>
      import("@remotion/google-fonts/PlayfairDisplay") as Promise<GoogleFont>,
  },
  {
    family: "Poppins",
    load: () => import("@remotion/google-fonts/Poppins") as Promise<GoogleFont>,
  },
  {
    family: "Prompt",
    load: () => import("@remotion/google-fonts/Prompt") as Promise<GoogleFont>,
  },
  {
    family: "Public Sans",
    load: () =>
      import("@remotion/google-fonts/PublicSans") as Promise<GoogleFont>,
  },
  {
    family: "Quicksand",
    load: () =>
      import("@remotion/google-fonts/Quicksand") as Promise<GoogleFont>,
  },
  {
    family: "Rajdhani",
    load: () =>
      import("@remotion/google-fonts/Rajdhani") as Promise<GoogleFont>,
  },
  {
    family: "Raleway",
    load: () => import("@remotion/google-fonts/Raleway") as Promise<GoogleFont>,
  },
  {
    family: "Red Hat Display",
    load: () =>
      import("@remotion/google-fonts/RedHatDisplay") as Promise<GoogleFont>,
  },
  {
    family: "Roboto",
    load: () => import("@remotion/google-fonts/Roboto") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Condensed",
    load: () =>
      import("@remotion/google-fonts/RobotoCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Mono",
    load: () =>
      import("@remotion/google-fonts/RobotoMono") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Slab",
    load: () =>
      import("@remotion/google-fonts/RobotoSlab") as Promise<GoogleFont>,
  },
  {
    family: "Rubik",
    load: () => import("@remotion/google-fonts/Rubik") as Promise<GoogleFont>,
  },
  {
    family: "Shadows Into Light",
    load: () =>
      import("@remotion/google-fonts/ShadowsIntoLight") as Promise<GoogleFont>,
  },
  {
    family: "Signika Negative",
    load: () =>
      import("@remotion/google-fonts/SignikaNegative") as Promise<GoogleFont>,
  },
  {
    family: "Slabo 27px",
    load: () =>
      import("@remotion/google-fonts/Slabo27px") as Promise<GoogleFont>,
  },
  {
    family: "Source Code Pro",
    load: () =>
      import("@remotion/google-fonts/SourceCodePro") as Promise<GoogleFont>,
  },
  {
    family: "Source Sans 3",
    load: () =>
      import("@remotion/google-fonts/SourceSans3") as Promise<GoogleFont>,
  },
  {
    family: "Space Grotesk",
    load: () =>
      import("@remotion/google-fonts/SpaceGrotesk") as Promise<GoogleFont>,
  },
  {
    family: "Teko",
    load: () => import("@remotion/google-fonts/Teko") as Promise<GoogleFont>,
  },
  {
    family: "Titillium Web",
    load: () =>
      import("@remotion/google-fonts/TitilliumWeb") as Promise<GoogleFont>,
  },
  {
    family: "Ubuntu",
    load: () => import("@remotion/google-fonts/Ubuntu") as Promise<GoogleFont>,
  },
  {
    family: "Varela Round",
    load: () =>
      import("@remotion/google-fonts/VarelaRound") as Promise<GoogleFont>,
  },
  {
    family: "Work Sans",
    load: () =>
      import("@remotion/google-fonts/WorkSans") as Promise<GoogleFont>,
  },
  {
    family: "Zilla Slab",
    load: () =>
      import("@remotion/google-fonts/ZillaSlab") as Promise<GoogleFont>,
  },
];

Show only the 25 most popular Google Fonts

To reduce bundle size, you can limit the selection. Instead of calling getAvailableFonts(), create a file with the following contents and use it as the fonts array:

ts
import type { GoogleFont } from "@remotion/google-fonts";
 
export const top25 = [
  {
    family: "Inter",
    load: () => import("@remotion/google-fonts/Inter") as Promise<GoogleFont>,
  },
  {
    family: "Kanit",
    load: () => import("@remotion/google-fonts/Kanit") as Promise<GoogleFont>,
  },
  {
    family: "Lato",
    load: () => import("@remotion/google-fonts/Lato") as Promise<GoogleFont>,
  },
  {
    family: "Lora",
    load: () => import("@remotion/google-fonts/Lora") as Promise<GoogleFont>,
  },
  {
    family: "Merriweather",
    load: () =>
      import("@remotion/google-fonts/Merriweather") as Promise<GoogleFont>,
  },
  {
    family: "Montserrat",
    load: () =>
      import("@remotion/google-fonts/Montserrat") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans",
    load: () =>
      import("@remotion/google-fonts/NotoSans") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans JP",
    load: () =>
      import("@remotion/google-fonts/NotoSansJP") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans KR",
    load: () =>
      import("@remotion/google-fonts/NotoSansKR") as Promise<GoogleFont>,
  },
  {
    family: "Noto Sans TC",
    load: () =>
      import("@remotion/google-fonts/NotoSansTC") as Promise<GoogleFont>,
  },
  {
    family: "Nunito",
    load: () => import("@remotion/google-fonts/Nunito") as Promise<GoogleFont>,
  },
  {
    family: "Nunito Sans",
    load: () =>
      import("@remotion/google-fonts/NunitoSans") as Promise<GoogleFont>,
  },
  {
    family: "Open Sans",
    load: () =>
      import("@remotion/google-fonts/OpenSans") as Promise<GoogleFont>,
  },
  {
    family: "Oswald",
    load: () => import("@remotion/google-fonts/Oswald") as Promise<GoogleFont>,
  },
  {
    family: "PT Sans",
    load: () => import("@remotion/google-fonts/PTSans") as Promise<GoogleFont>,
  },
  {
    family: "Playfair Display",
    load: () =>
      import("@remotion/google-fonts/PlayfairDisplay") as Promise<GoogleFont>,
  },
  {
    family: "Poppins",
    load: () => import("@remotion/google-fonts/Poppins") as Promise<GoogleFont>,
  },
  {
    family: "Raleway",
    load: () => import("@remotion/google-fonts/Raleway") as Promise<GoogleFont>,
  },
  {
    family: "Roboto",
    load: () => import("@remotion/google-fonts/Roboto") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Condensed",
    load: () =>
      import("@remotion/google-fonts/RobotoCondensed") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Mono",
    load: () =>
      import("@remotion/google-fonts/RobotoMono") as Promise<GoogleFont>,
  },
  {
    family: "Roboto Slab",
    load: () =>
      import("@remotion/google-fonts/RobotoSlab") as Promise<GoogleFont>,
  },
  {
    family: "Rubik",
    load: () => import("@remotion/google-fonts/Rubik") as Promise<GoogleFont>,
  },
  {
    family: "Ubuntu",
    load: () => import("@remotion/google-fonts/Ubuntu") as Promise<GoogleFont>,
  },
  {
    family: "Work Sans",
    load: () =>
      import("@remotion/google-fonts/WorkSans") as Promise<GoogleFont>,
  },
];