@remotion/google-fonts usage with remotion player in Next.js gives ReferenceError

[Just-Moh-it]

Bug Report 🐛

I'm using a remotion player component, playing a composition that has the Montserrat from imported and used in the following manner:

import * as Montserrat from "@remotion/google-fonts/Montserrat";

const { fontFamily: montserratFontFamily } = Montserrat.loadFont("normal", {
  weights: ["400", "500", "600", "700"],
  subsets: ["latin"],
});

// usage like
<main style={{ fontFamily: montserratFontFamily, }} />

What's strange is that the error shows up randomly, only bothers 60% of the times I run the dev server, but sometimes it works like a charm and the fonts are loaded on the remotion player.

Dev environment

My package.json has the following packages

{"scripts": {
    "@remotion/bundler": "^3.3.25",
    "@remotion/cli": "^3.3.25",
    "@remotion/google-fonts": "^3.3.25",
    "@remotion/lambda": "^3.3.25",
    "@remotion/motion-blur": "^3.3.25",
    "@remotion/player": "^3.3.25",
    "remotion": "^3.3.25",

    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
}}

This is the exact error message:

ReferenceError: FontFace is not defined
    at loadFonts (/hidden-random-lolproj-ect/node_modules/.pnpm/@remotion+google-fonts@3.3.27_biqbaboplfbrettd7655fr4n2y/node_modules/@remotion/google-fonts/dist/base.js:39:34)
    at Object.loadFont (/hidden-random-lolproj-ect/node_modules/.pnpm/@remotion+google-fonts@3.3.27_biqbaboplfbrettd7655fr4n2y/node_modules/@remotion/google-fonts/dist/Montserrat.js:153:33)
    at eval (webpack-internal:///./src/animations/loving-customers.tsx:26:110)
    at Object../src/animations/loving-customers.tsx (/hidden-random-project-lol/.next/server/pages/_app.js:77:1)
    at __webpack_require__ (/hidden-random-project-lol/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/animations/templates.ts:6:75)
    at Object../src/animations/templates.ts (/hidden-random-project-lol/.next/server/pages/_app.js:88:1)
    at __webpack_require__ (/hidden-random-project-lol/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/store/playerSlice.ts:7:78)
    at Object../src/store/playerSlice.ts (/hidden-random-project-lol/.next/server/pages/_app.js:165:1) {
  page: '/'
}

[Just-Moh-it]

Hey @JonnyBurger and team, hope you've read this issue 😄

[JonnyBurger]

I missed it indeed! Sorry 😱 This is a good point, we should make it a no-op on the server.