Skip to main content

loadFont()

Part of the @remotion/google-fonts package

Load a Google Font for use in Remotion.

  • Automatically blocks the render until the font is ready
  • Offers a way to narrow down weights, styles and character subsets.
  • Each loadFont() call is typesafe and available options are exposed through autocompletion.

Usage​

Without arguments, all styles, weights and character subsets of a font are being loaded.

Load all variants of the Lobster font
tsx
import { loadFont } from "@remotion/google-fonts/Lobster";
import { AbsoluteFill } from "remotion";
 
const { fontFamily } = loadFont();
 
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily: fontFamily,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};
Load all variants of the Lobster font
tsx
import { loadFont } from "@remotion/google-fonts/Lobster";
import { AbsoluteFill } from "remotion";
 
const { fontFamily } = loadFont();
 
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily: fontFamily,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};

Pass a specific style (e.g. normal, italic) and optionally weights and subsets to narrow down what gets loaded.
If you want to load multiple styles, use multiple loadFont() statements.

Load a specific style, weight and subset
tsx
import { fontFamily, loadFont } from "@remotion/google-fonts/Lobster";
loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
});
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontFamily: fontFamily,
        fontSize: 280,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};
Load a specific style, weight and subset
tsx
import { fontFamily, loadFont } from "@remotion/google-fonts/Lobster";
loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
});
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontFamily: fontFamily,
        fontSize: 280,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};

Arguments​

All arguments and options are optional. Use TypeScript autocompletion or getInfo to discover available options. With any of them, all styles, weights and subsets are loaded.

style​

The font style we want to load. While each font has a different set of styles, common options are: normal, italic etc.

options​

weights​

optional

Array of weights that should be loaded. By default, all.

subsets​

optional

Array of font subsets that should be loaded. By default, all.

document​

optional

Allows you to specify a Document. If you want to inject the fonts into an iframe, you want to give it a ref and pass iframeRef.contentDocument to this parameter. By default, the global window.document is used.

Return value​

An object with the following properties:

fontFamily​

The font family name, be used as the fontFamily CSS property.

fonts​

Variant information about the font.

Example value
js
{
  normal: {
    '400': {
      'latin-ext': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjCmjgm6Es.woff2',
      'latin': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjClDgm.woff2',
    },
  },
}
Example value
js
{
  normal: {
    '400': {
      'latin-ext': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjCmjgm6Es.woff2',
      'latin': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjClDgm.woff2',
    },
  },
}

unicodeRanges​

Unicode range information about the font.

Example value
js
{
  'latin-ext': 'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
  'latin': 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
}
Example value
js
{
  'latin-ext': 'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
  'latin': 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
}

See also​