Skip to main content

getAvailableFonts()

import {AvailableFonts} from '../../components/AvailableFonts'

Part of the @remotion/google-fonts package

Array of all available fonts available in @remotion/google-fonts.
From v3.3.64 on, the font can be loaded individually by calling .load() if you are loading the function using ES Modules.

Usage​

ts
import { getAvailableFonts } from "@remotion/google-fonts";
 
console.log(getAvailableFonts());
ts
import { getAvailableFonts } from "@remotion/google-fonts";
 
console.log(getAvailableFonts());
Structure (shortened)
ts
[
  {
    fontFamily: "ABeeZee",
    importName: "ABeeZee",
    load: () => import("./ABeeZee"), // Available from v3.3.64
  },
  {
    fontFamily: "Abel",
    importName: "Abel",
    load: () => import("./Abel"),
  },
  {
    fontFamily: "Abhaya Libre",
    importName: "AbhayaLibre",
    load: () => import("./AbhayaLibre"),
  },
];
Structure (shortened)
ts
[
  {
    fontFamily: "ABeeZee",
    importName: "ABeeZee",
    load: () => import("./ABeeZee"), // Available from v3.3.64
  },
  {
    fontFamily: "Abel",
    importName: "Abel",
    load: () => import("./Abel"),
  },
  {
    fontFamily: "Abhaya Libre",
    importName: "AbhayaLibre",
    load: () => import("./AbhayaLibre"),
  },
];
  • fontFamily is how the name should be referenced in CSS.
  • importName is the identifier of how the font can be imported: @remotion/google-fonts/[import-name].

Note about CommonJS​

If you require() this module, it is not possible to dynamically load a font. This also applies to code that transpiles to using require() under the hood. Newer versions of Next.js, Vite and Astro are automatically configured to allow for lazy loading.

List of available fonts​

See also​