Skip to main content

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>
);
};
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>
);
};

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>,
},
];
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>,
},
];

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<