Skip to main content

loadFontFromInfo()v4.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.

On the server
tsx
import {getInfo} from '@remotion/google-fonts/InterTight';
 
// Return `info` to the client using an endpoint
const info = getInfo();
On the client
tsx
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().

MyComp.tsx
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

See also​