Quote brand font family names in the generated CSS (#15103)

Brand font families were written into the generated CSS unquoted. A
family with a part starting with a digit, such as "Source Sans 3",
then became an invalid font-family declaration that browsers drop.
Family values now go through asCssFont, the helper mainfont and
monofont already use. revealjs needed the same fix because reveal.js
builds its font custom properties by interpolation, which also drops
the quotes.

- Quote brand typography families with asCssFont.
- In revealjs, re-declare --r-main-font, --r-heading-font and
  --r-code-font with inspect() in quarto.scss. This also fixes
  mainfont in revealjs without a brand.
- Use inspect() for --mermaid-font-family.

Fixes #14882

Author: Masad791

news/changelog-1.11.md

@@ -42,6 +42,7 @@ All changes included in 1.11:
 ### All Formats
 
 - ([#14772](https://github.com/quarto-dev/quarto-cli/issues/14772)): Custom `language` keys now reach templates through `$quarto.language.<key>$`. A key that Quarto does not ship passed schema validation and was merged over the defaults, then discarded before templates saw it, so it expanded to an empty string with no warning. (author: @mcanouil)
+- ([#14882](https://github.com/quarto-dev/quarto-cli/issues/14882)): Fix brand font families with a word starting with a digit, such as `Source Sans 3`, not applying in `html` and `revealjs` output. The same names in `mainfont` now also apply in `revealjs`. (author: @Masad791)
 
 ### `dashboard`
 

src/core/sass/brand.ts

@@ -27,6 +27,7 @@ import { darkModeDefault } from "../../format/html/format-html-info.ts";
 import { kBrandMode } from "../../config/constants.ts";
 import { join, relative } from "../../deno_ral/path.ts";
 import { isExternalPath } from "../url.ts";
+import { asCssFont } from "../css.ts";
 
 const defaultColorNameMap: Record<string, string> = {
   "link-color": "link",
@@ -543,6 +544,11 @@ const brandTypographyLayer = (
         let value = fontInformation[source];
         if (["color", "background-color"].includes(source)) {
           value = brand.getColor(value as string);
+        } else if (source === "family") {
+          // quote names with spaces, as the mainfont/monofont path does: an
+          // unquoted name with a part starting with a digit ("Source Sans 3")
+          // is invalid CSS and the browser drops the declaration
+          value = asCssFont(value) ?? value;
         }
         typographyVariables.push(
           `$${target}: ${value} !default;`,

src/resources/formats/html/_quarto-rules.scss

@@ -734,7 +734,7 @@ $mermaid-node-fg-color: $primary !default;
   --mermaid-fg-color: #{$mermaid-fg-color};
   --mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
   --mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
-  --mermaid-font-family: #{$mermaid-font-family};
+  --mermaid-font-family: #{inspect($mermaid-font-family)};
   --mermaid-label-bg-color: #{$mermaid-label-bg-color};
   --mermaid-label-fg-color: #{$mermaid-label-fg-color};
   --mermaid-node-bg-color: #{$mermaid-node-bg-color};

src/resources/formats/revealjs/quarto.scss

@@ -856,8 +856,13 @@ kbd {
 }
 
 :root {
-  --r-inline-code-font: #{$font-family-monospace-inline};
-  --r-block-code-font: #{$font-family-monospace-block};
+  // inspect() keeps the quotes of a family name like "Source Sans 3", which
+  // plain interpolation drops; reveal.js' exposer.scss writes these without them
+  --r-main-font: #{inspect($mainFont)};
+  --r-heading-font: #{inspect($headingFont)};
+  --r-code-font: #{inspect($codeFont)};
+  --r-inline-code-font: #{inspect($font-family-monospace-inline)};
+  --r-block-code-font: #{inspect($font-family-monospace-block)};
   --r-inline-code-font-size: #{$revealjs-code-inline-font-size};
   --r-block-code-font-size: #{$revealjs-code-block-font-size};
 }

tests/docs/smoke-all/2026/10/19/issue-14882-revealjs-mainfont.qmd

@@ -0,0 +1,17 @@
+---
+title: "Issue 14882 - mainfont and monofont names are quoted in revealjs CSS"
+format: revealjs
+mainfont: Source Sans 3
+monofont: M PLUS 1 Code
+_quarto:
+  tests:
+    revealjs:
+      ensureCssRegexMatches:
+        - ['--r-main-font:\s*"Source Sans 3"', '--r-heading-font:\s*"Source Sans 3"', '--r-code-font:\s*"M PLUS 1 Code"', '--r-inline-code-font:\s*"M PLUS 1 Code"', '--r-block-code-font:\s*"M PLUS 1 Code"']
+        # reveal.js' exposer.scss still writes the values unquoted first; an unquoted one after Quarto's quoted one would win
+        - ['--r-main-font:\s*"Source Sans 3"[\s\S]*--r-main-font:\s*Source Sans 3', '--r-heading-font:\s*"Source Sans 3"[\s\S]*--r-heading-font:\s*Source Sans 3', '--r-code-font:\s*"M PLUS 1 Code"[\s\S]*--r-code-font:\s*M PLUS 1 Code']
+---
+
+## A slide
+
+Without a brand, `mainfont` and `monofont` names with a word starting with a digit must keep their quotes in the reveal.js font variables. Body text and `inline code`.

tests/docs/smoke-all/2026/10/19/issue-14882-revealjs.qmd

@@ -0,0 +1,20 @@
+---
+title: "Issue 14882 - brand font family names are quoted in revealjs CSS"
+format: revealjs
+brand:
+  typography:
+    base: Source Sans 3
+    headings: Bricolage Grotesque 96pt
+    monospace: M PLUS 1 Code
+_quarto:
+  tests:
+    revealjs:
+      ensureCssRegexMatches:
+        - ['--r-main-font:\s*"Source Sans 3"', '--r-heading-font:\s*"Bricolage Grotesque 96pt"', '--r-code-font:\s*"M PLUS 1 Code"', '--mermaid-font-family:\s*"Source Sans 3"']
+        # reveal.js' exposer.scss still writes the values unquoted first; an unquoted one after Quarto's quoted one would win
+        - ['--r-main-font:\s*"Source Sans 3"[\s\S]*--r-main-font:\s*Source Sans 3', '--r-heading-font:\s*"Bricolage Grotesque 96pt"[\s\S]*--r-heading-font:\s*Bricolage Grotesque 96pt', '--r-code-font:\s*"M PLUS 1 Code"[\s\S]*--r-code-font:\s*M PLUS 1 Code']
+---
+
+## A slide
+
+Body text and `inline code`.

tests/docs/smoke-all/2026/10/19/issue-14882.qmd

@@ -0,0 +1,22 @@
+---
+title: "Issue 14882 - brand font family names are quoted in CSS"
+format: html
+brand:
+  typography:
+    fonts:
+      - family: Source Sans 3
+        source: google
+    base: Source Sans 3
+    headings: Bricolage Grotesque 96pt
+    monospace: M PLUS 1 Code
+_quarto:
+  tests:
+    html:
+      ensureCssRegexMatches:
+        - ['--bs-body-font-family:\s*"Source Sans 3"', 'font-family:\s*"Bricolage Grotesque 96pt"', '--bs-font-monospace:\s*"M PLUS 1 Code"', '--mermaid-font-family:\s*"Source Sans 3"']
+        - ['font-family:\s*Source Sans 3', 'font-family:\s*Bricolage Grotesque 96pt', 'monospace:\s*M PLUS 1 Code']
+---
+
+## A heading
+
+Body text and `inline code`.