New `@remotion/fonts` package with `loadFont()` function

[JonnyBurger]

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

[algora-pbc[bot]]

## 💎 $300 bounty • Remotion

💎 $200 bounty • Algora

Steps to solve:

1. Get assigned: If you'd like to work on this issue, comment /attempt below to get assigned
2. Submit work: Create a pull request including /claim #3904 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Additional opportunities:

• 🔴 Livestream on Algora TV while solving this bounty & earn $200 upon merge! Comment /livestream once live

Thank you for contributing to remotion-dev/remotion!

Add a bounty • Share on socials

[benya7]

Hi! I'm interested in working on this. Thank you.

/attempt

Options

• Cancel my attempt

[algora-pbc[bot]]

@benya7: The Remotion team prefers to assign a single contributor to the issue rather than let anyone attempt it right away. We recommend waiting for a confirmation from a member before getting started.

[JonnyBurger]

Cool! Good luck @benya7!

[abhishek818]

Adding myself in the queue..

[benya7]

/livestream

Click here to watch benya7

[algora-pbc[bot]]

💡 @benya7 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[algora-pbc[bot]]

🎉🎈 @benya7 has been awarded $300! 🎈🎊

• Share on socials
• Give feedback

[algora-pbc[bot]]

🎉🎈 @benya7 has been awarded $200! 🎈🎊

• Share on socials
• Give feedback