import font as url

next.config.js

@@ -35,6 +35,7 @@ const config = {
     config.module.rules.push({
       test: /\.(woff|woff2|eot|ttf|otf)$/i,
       type: "asset/resource",
+      resourceQuery: /url/,
     });
     return config
   },

src/app/api/og/route.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from 'next/og';
 
+export const runtime = 'edge';
+
 export interface OgMetadata {
   id: string;
   title?: string;

src/app/layout.tsx

@@ -1,9 +1,9 @@
 import type { Metadata, Viewport } from 'next';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 import ThemeProvider from '@/components/Layout/ThemeProvider';
-import RobotoLatin400 from '@fontsource/roboto/files/roboto-latin-400-normal.woff2';
-import RobotoLatin500 from '@fontsource/roboto/files/roboto-latin-500-normal.woff2';
-import RobotoLatin700 from '@fontsource/roboto/files/roboto-latin-700-normal.woff2';
+import RobotoLatin400 from '@fontsource/roboto/files/roboto-latin-400-normal.woff2?url';
+import RobotoLatin500 from '@fontsource/roboto/files/roboto-latin-500-normal.woff2?url';
+import RobotoLatin700 from '@fontsource/roboto/files/roboto-latin-700-normal.woff2?url';
 import 'mathlive/static.css';
 import '@/editor/theme.css';
 import './globals.css';

src/fonts.d.ts

@@ -1,2 +1,5 @@
-declare module '*.woff';
-declare module '*.woff2';
+declare module '*.woff2?url' {
+  const value: string;
+
+  export default value;
+}