diff --git a/src/core/css.ts b/src/core/css.ts
index dc51c80032..3bbce0ef78 100644
--- a/src/core/css.ts
+++ b/src/core/css.ts
@@ -90,7 +90,9 @@ export function asCssFont(value: unknown): string | undefined {
       .split(",")
       .map((font) => {
         font = font.trim();
-        if (font.includes(" ")) {
+        if (
+          font.includes(" ") && !font.startsWith('"') && !font.startsWith("'")
+        ) {
           font = `"${font}"`;
         }
         return font;
diff --git a/tests/docs/playwright/html/mainfont/mainfont-1.qmd b/tests/docs/playwright/html/mainfont/mainfont-1.qmd
new file mode 100644
index 0000000000..cdc5040eb5
--- /dev/null
+++ b/tests/docs/playwright/html/mainfont/mainfont-1.qmd
@@ -0,0 +1,9 @@
+---
+title: "Code font size"
+format: html
+mainfont: Creepster, "Cascadia Code", Inter
+---
+
+# content
+
+Content
\ No newline at end of file
diff --git a/tests/docs/playwright/html/mainfont/mainfont-2.qmd b/tests/docs/playwright/html/mainfont/mainfont-2.qmd
new file mode 100644
index 0000000000..67467267d5
--- /dev/null
+++ b/tests/docs/playwright/html/mainfont/mainfont-2.qmd
@@ -0,0 +1,9 @@
+---
+title: "Code font size"
+format: html
+mainfont: Creepster, Cascadia Code, Inter
+---
+
+# content
+
+Content
\ No newline at end of file
diff --git a/tests/docs/playwright/html/mainfont/mainfont-3.qmd b/tests/docs/playwright/html/mainfont/mainfont-3.qmd
new file mode 100644
index 0000000000..37e1ee7105
--- /dev/null
+++ b/tests/docs/playwright/html/mainfont/mainfont-3.qmd
@@ -0,0 +1,9 @@
+---
+title: "Code font size"
+format: html
+mainfont: Creepster, 'Cascadia Code', Inter
+---
+
+# content
+
+Content
\ No newline at end of file
diff --git a/tests/integration/playwright/tests/html-themes.spec.ts b/tests/integration/playwright/tests/html-themes.spec.ts
index 0ecb43cf80..08b71d33b2 100644
--- a/tests/integration/playwright/tests/html-themes.spec.ts
+++ b/tests/integration/playwright/tests/html-themes.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { getCSSProperty } from '../src/utils';
 
 test('Dark and light theme respect user themes', async ({ page }) => {
   // This document use a custom theme file that change the background color of the title banner
@@ -25,8 +26,15 @@ test('Code block font size did not change and still equals to pre size', async (
   await page.goto('./html/code-font-size.html');
   const code = page.getByRole('code')
   const pre = page.locator('pre')
-  const preFontSize = await pre.evaluate((element) =>
-    window.getComputedStyle(element).getPropertyValue('font-size'),
-  );
+  const preFontSize = await getCSSProperty(pre, 'font-size', false) as string;
   await expect(code).toHaveCSS('font-size', preFontSize);
-});
\ No newline at end of file
+});
+
+test('Mainfont can be set to multiple mainfont families', async ({ page }) => {
+  await page.goto('./html/mainfont/mainfont-1.html');
+  expect(await getCSSProperty(page.locator('body'), '--bs-body-font-family', false)).toEqual('Creepster, "Cascadia Code", Inter');
+  await page.goto('./html/mainfont/mainfont-2.html');
+  expect(await getCSSProperty(page.locator('body'), '--bs-body-font-family', false)).toEqual('Creepster, "Cascadia Code", Inter');
+  await page.goto('./html/mainfont/mainfont-3.html');
+  expect(await getCSSProperty(page.locator('body'), '--bs-body-font-family', false)).toEqual('Creepster, "Cascadia Code", Inter');
+})
\ No newline at end of file