loadFontFromInfo()<AvailableFrom v="4.0.279"/>

Loads a Google Font based on some metadata that was obtained using getInfo().

getInfo() returns just a pure JSON object, so the metadata of a font may be loaded from a server, which can avoid having a heavy client-side bundle.

tsx

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

// Return `info` to the client using an endpoint
const info = getInfo();

tsx

import {getInfo} from '@remotion/google-fonts/InterTight';
import {loadFontFromInfo} from '@remotion/google-fonts/from-info';

const loadInfoFromServer = () => {
  return Promise.resolve(getInfo());
};

// ---cut---
const info = await loadInfoFromServer();

const {fontFamily, waitUntilDone} = loadFontFromInfo(info, 'italic');

console.log(fontFamily);
waitUntilDone();

API

The API is the same as loadFont(), except that another argument needs to be passed in first position, that being font metadata loaded using getInfo().

tsx

import {getInfo} from '@remotion/google-fonts/InterTight';
import {loadFontFromInfo} from '@remotion/google-fonts/from-info';

const {waitUntilDone} = loadFontFromInfo(getInfo(), 'normal', {
  weights: ['400'],
  subsets: ['latin'],
});

Unlike loadFont(), there is no autocomplete