useFonts from react-native-skia with @remotion/skia

[Naman-Arora]

Hi, I am trying to use react-native-skia with remotion and I followed the steps in the documentation to add Skia to Remotion. However, I am facing issues when trying to use Skia.ParagraphBuilder.Make because react-native-skia for the web requires a typefaceProvider of type SkTypefaceFontProvider. How can I use useFonts() with Remotion to create a SkTypefaceFontProvider?

This is my (not working) code right now:

import { SkiaCanvas } from "@remotion/skia";
import {
  Fill,
  Paragraph,
  Skia,
  TextAlign,
  useFonts,
} from "@shopify/react-native-skia";
import { useMemo } from "react";
import { useVideoConfig, staticFile } from "remotion";

export default function RemotionSkia() {
  const { width, height } = useVideoConfig();

  const skiaFonts = useFonts({
    Manrope: [
      require(staticFile("fonts/Manrope-Bold.ttf")),
      require(staticFile("fonts/Manrope-ExtraBold.ttf")),
      require(staticFile("fonts/Manrope-ExtraLight.ttf")),
      require(staticFile("fonts/Manrope-Light.ttf")),
      require(staticFile("fonts/Manrope-Medium.ttf")),
      require(staticFile("fonts/Manrope-Regular.ttf")),
      require(staticFile("fonts/Manrope-SemiBold.ttf")),
    ],
  });

  const paragraph = useMemo(() => {
    if (skiaFonts === null) return null;

    return Skia.ParagraphBuilder.Make(
      {
        textAlign: TextAlign.Center,
      },
      skiaFonts,
    )
      .pushStyle({
        color: Skia.Color("red"),
        fontSize: 50,
      })
      .addText("Hello, this is ")
      .pushStyle({
        color: Skia.Color("orange"),
        fontSize: 50,
        fontStyle: {
          weight: 600,
        },
      })
      .addText("Remotion & Skia!")
      .pop()
      .build();
  }, [skiaFonts]);

  return (
    <SkiaCanvas width={width} height={height}>
      <Fill color="green" />

      <Paragraph paragraph={paragraph} x={0} y={0} width={300} />
    </SkiaCanvas>
  );
}

It throws the following error: Cannot find module '/static-bc599d841b81/fonts/Manrope-Bold.ttf'

Here is my public folder structure:

public/
├─ assets/
│  ├─ image.png
├─ fonts/
│  ├─ Manrope-Bold.ttf
│  ├─ Manrope-ExtraBold.ttf
│  ├─ Manrope-ExtraLight.ttf
│  ├─ Manrope-Light.ttf
│  ├─ Manrope-Medium.ttf
│  ├─ Manrope-Regular.ttf
│  ├─ Manrope-SemiBold.ttf

Thanks so much for your help!

[JonnyBurger]

Have you tried without the require()?

- require(staticFile("fonts/Manrope-Bold.ttf"))
+ staticFile()