diff --git a/packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx b/packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx
index 1b9c473016..cf1486988c 100644
--- a/packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx
+++ b/packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx
@@ -150,13 +150,19 @@ function getPreloadedFont(
     if (file == null) {
         return null;
     }
+    let fontExtension: string;
+    try {
+        fontExtension = getFontExtension(new URL(file).pathname);
+    } catch (err) {
+        fontExtension = getFontExtension(file);
+    }
     return (
         <link
             key={variant.fontFile}
             rel="preload"
             href={file}
             as="font"
-            type={`font/${getFontExtension(file)}`}
+            type={`font/${fontExtension}`}
             crossOrigin="anonymous"
         />
     );
diff --git a/packages/ui/app/src/next-app/utils/getFontVariables.ts b/packages/ui/app/src/next-app/utils/getFontVariables.ts
index 2a5e506d05..904819af37 100644
--- a/packages/ui/app/src/next-app/utils/getFontVariables.ts
+++ b/packages/ui/app/src/next-app/utils/getFontVariables.ts
@@ -28,9 +28,15 @@ function generateFontFace(
     if (file == null) {
         return undefined;
     }
+    let fontExtension: string;
+    try {
+        fontExtension = getFontExtension(new URL(file.url).pathname);
+    } catch (err) {
+        fontExtension = getFontExtension(file.url);
+    }
     const lines: string[] = [
         `font-family: '${fontConfig.name}'`,
-        `src: url('${file.url}') format('${getFontExtension(file.url)}')`,
+        `src: url('${file.url}') format('${fontExtension}')`,
         `font-weight: ${variant.weight?.join(" ") ?? "100 900"}`,
         `font-style: ${variant.style?.[0] ?? "normal"}`,
         `font-display: ${fontConfig.display ?? "swap"}`,