Font not loading properly

[empty niche]

I am animating text with a custom google font, imported using remotion google font library. but sometime for a split second the custom font is not applied and it shows a default serif font, any suggestion regarding this to ensure proper font loading?

Another thing I want to know, is it better to load static fonts from the public folder, or using a CDN service like cloudfront?

[karmic torrent]

the loadFont() call must be outside the component, not inside a useEffect() or somewhere else where it can be delayed.

can you post your font loading code so we can review it for errors?

[empty niche]

import React, { useEffect } from "react";
import { AllFonts } from "@/utils/fonts";

export const Test = ({style}) => {
  useEffect(() => {
    const loadFont = async () => {
      try {
        const fontModule = await AllFonts.find(
          (font) => font.family === style.fontFamily
        )?.load();
        
        if (!fontModule) throw new Error("Font not found");
        fontModule.loadFont();
      } catch (err) {
        console.log("Font loading error:", err);
      }
    };

    loadFont();
  }, [style]);
  return <div>Test Element</div>;
};

@karmic torrent that how i am using it, it depending on the style object, that has been loaded asynchronously, that why i had to put it inside the useEfflect tab

[karmic torrent]

create a delayRender() that blocks the render as soon as the component mounts

const [handle] = useState(() => delayRender())

then unblock it as soon as the font is loaded