Skip to main content

@remotion/google-fonts

The @remotion/google-fonts package provides APIs for easily integrating Google Fonts into Remotion.

Installation​

npm i @remotion/google-fonts

Usage​

To load a font, import the package @remotion/google-fonts/<FontName> and call loadFont().

Load all font styles
import {loadFont} from '@remotion/google-fonts/TitanOne';
const {fontFamily} = loadFont(); // "Titan One"

If you want to import multiple fonts and want to avoid a variable name collision, you can import the fonts using an import * as statement.

Scope loadFont() variable
import * as Montserrat from '@remotion/google-fonts/Montserrat';
Montserrat.loadFont();

Call loadFont() to start the loading process. By default, every style, weight and subset is loaded.

You can pass a style (such as normal, italic) to only load that specific style. If you want multiple styles, call loadFont() multiple times.

Load just one style
import {loadFont} from '@remotion/google-fonts/TitanOne';

loadFont('normal');

Use the TypeScript autocomplete to see the available styles. To further narrow down what's being loaded, you can specify weights and subsets. These options are also typesafe.

Load a specific style with limit weights and subsets
import * as Montserrat from '@remotion/google-fonts/Montserrat';

Montserrat.loadFont('normal', {
  weights: ['400', '600', '800'],
  subsets: ['latin', 'latin-ext'],
});

loadFont() returns an object with a fontFamily property. You can use the style attribute to render text in the font you loaded.

Use the fontFamily property
import {loadFont} from '@remotion/google-fonts/TitanOne';
import {AbsoluteFill} from 'remotion';

const {fontFamily} = loadFont();

export const GoogleFontsDemoComposition = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily,
      }}
    >
      <div>Hallo Google Fonts</div>
    </AbsoluteFill>
  );
};

To get information about a font, you can import the getInfo() function:

Get info about the font
import {getInfo} from '@remotion/google-fonts/Montserrat';
console.log(getInfo());
Example value of info object
{
  "fontFamily": "Titan One",
  "importName": "TitanOne",
  "version": "v13",
  "url": "https://fonts.googleapis.com/css2?family=Titan+One:ital,wght@0,400",
  "unicodeRanges": {
    "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"
  },
  "fonts": {
    "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"
      }
    }
  },
  "subsets": ["latin", "latin-ext"]
}

To get a list of all available fonts, you can call getAvailableFonts() imported from @remotion/google-fonts:

import {getAvailableFonts} from '@remotion/google-fonts';

console.log(getAvailableFonts());

APIs​

Troubleshooting​

Known issues:

Credits​

Implemented by Hidayatullah.

License​

MIT

See also​