This package should just wrap the following function (from here):

import { continueRender, delayRender, staticFile, cancelRender } from "remotion";
 
const waitForFont = delayRender();
const font = new FontFace(
  `Bangers`,
  `url('${staticFile("bangers.woff2")}') format('woff2')`,
);
 
font
  .load()
  .then(() => {
    document.fonts.add(font);
    continueRender(waitForFont);
  })
  .catch((err) => cancelRender(err));

Pain points for users who copy this manually:

• Properly awaiting
• Missing to use url()
• Missing to use staticFile()
• Setting the right format() value (e.g. putting otf instead of opentype)
• Messing up the parentheses
• Missing error handling
• Missing that there are options you can pass:

We should make an API that is easier: loadFont() and it should live in a new package @remotion/fonts.

Acceptance criteria

1. Implement a function with this signature:

import {loadFont} from "@remotion/fonts";

await loadFont({
	fontFamily: 'some name',
	url: 'someName',
	weight: '500',
	// ... the other options as seen in the screenshot above
})

2. Create documentation for this page similar to other packages - main page and 1 page for the specific loadFont() function. All options should be documented and have similar or better quality than the other documentation pages.
3. Add a sample composition to packages/example so we can test the function. For this, add @remotion/fonts to it's package.json

Bounty

💎 This issue has a bounty on it!

Read our contributing guidelines:

• How to contribute: https://www.remotion.dev/docs/contributing/
• Implementing a new feature: https://www.remotion.dev/docs/contributing/feature
• Implementing a new option: https://www.remotion.dev/docs/contributing/option
• Write documentation: https://www.remotion.dev/docs/contributing/docs
• Bounty information: https://www.remotion.dev/docs/contributing/bounty

/bounty 300