Quote brand font family names in the generated CSS

news/changelog-1.11.md

@@ -39,6 +39,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`.