Skip to main content

loadVariableFont()v4.0.525

Part of the @remotion/google-fonts package

Loads a Google Font as a variable font. One font file can provide a continuous range of weights and other variation axes.

This export is only available for fonts that Google Fonts provides as variable fonts.

Usage​

VariableFont.tsx
import {loadVariableFont} from '@remotion/google-fonts/NotoSans';
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

const {axes, fontFamily} = loadVariableFont('normal', {
  subsets: ['latin'],
});

export const VariableFont: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        fontFamily,
        fontWeight: interpolate(frame, [0, 90], [
          axes.wght.min,
          axes.wght.max,
        ]),
      }}
    >
      Variable font
    </AbsoluteFill>
  );
};

Variable fonts combine variation axes, but Google may still provide separate files for styles and character subsets.

Arguments​

style​

The style to load, such as normal or italic.

options​

subsets​

The character subsets to load. At least one subset is required.

document?​

The document into which the font should be added. By default, the global window.document is used.

ignoreTooManyRequestsWarning?​

Set this to true to disable the warning emitted when loading more than 20 subset files.

Return value​

fontFamily​

The font family name, for use with the fontFamily CSS property.

axes​

The minimum and maximum value of each available variation axis.

waitUntilDone()​

Returns a promise that resolves once the font files have loaded.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​