Merge pull request #11389 from quarto-dev/fix/multiple-mainfont

css - don't quote fonts if already quoted

Author: cscheid

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;

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

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

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

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);
-});
+});
+
+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');
+})