Skip to content

Quote brand font family names in the generated CSS - #15103

Merged
cderv merged 3 commits into
quarto-dev:mainfrom
Masad791:bugfix/brand-font-quotes
Oct 19, 2026
Merged

cderv merged 3 commits into
quarto-dev:mainfrom
Masad791:bugfix/brand-font-quotes

Conversation

@Masad791

Copy link
Copy Markdown
Contributor

Description

Fixes #14882.

brandTypographyLayer now runs family values through asCssFont, the same helper the mainfont/monofont path uses, so Source Sans 3 comes out as "Source Sans 3". That's enough for html.

revealjs needed one more step. reveal.js' exposer.scss builds --r-main-font, --r-heading-font and --r-code-font with #{$mainFont} etc., and interpolation drops the quotes again. That also means mainfont: Source Sans 3 is broken in revealjs today, not only the brand path. Rather than edit the vendored file, quarto.scss re-declares those three properties (plus the inline/block code font ones it already sets) with #{inspect(...)}, the way Bootstrap's _root.scss does. Quarto's rules come after the framework rules, so these win. --mermaid-font-family in _quarto-rules.scss had the same interpolation, so it got inspect() too.

Checked in Chromium: body was computing to Times; with this change body, h2 and code compute to "Source Sans 3", "Bricolage Grotesque 96pt" and "M PLUS 1 Code" in both html and revealjs.

Tests: 2026/10/19/issue-14882.qmd (html) and issue-14882-revealjs.qmd. The revealjs one also asserts that no unquoted declaration comes after Quarto's quoted one, since exposer.scss still writes the unquoted value first. Both fail on main and pass with this change. I also ran the brand tests, the revealjs tests and everything asserting on font-family (202 documents, 300 renders across formats): 296 pass, and the other 4 need Jupyter, LaTeX or R and fail the same way on main on my machine.

Checklist

I have (if applicable):

  • referenced the GitHub issue this PR closes
  • updated the appropriate changelog in the PR
  • ensured the present test suite passes
  • added new tests
  • created a separate documentation PR in Quarto's website repo and linked it to this PR
AI-assisted PR
  • AI tool used: Claude Code
  • Codebase grounding: local clone
  • Human review: I have reviewed, tested, and verified the AI-generated content before submitting.

Brand typography families were written into the Sass variables as is, so
a name with a part starting with a digit, like "Source Sans 3", ended up as
`font-family: Source Sans 3`. That's invalid CSS and the browser drops the
declaration. The family values now go through asCssFont, as the mainfont
and monofont metadata already do.

In revealjs, exposer.scss builds --r-main-font, --r-heading-font and
--r-code-font with plain interpolation, which drops the quotes again, so
`mainfont: Source Sans 3` was affected there too. quarto.scss re-declares
those properties (and the inline/block code fonts it already sets) with
inspect(), like Bootstrap's _root.scss, and --mermaid-font-family gets the
same treatment.

Fixes quarto-dev#14882
@posit-snyk-bot

posit-snyk-bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Collaborator

✅ Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues
✅ Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@cderv cderv left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, and for the detailed issue.

I can reproduce on main, and the fix works for me. In Chromium, body and h2 compute to "Times New Roman" on main for the issue example, in both html and revealjs. With this PR, body, h2 and code compute to "Source Sans 3", "Bricolage Grotesque 96pt" and "M PLUS 1 Code". mainfont: Source Sans 3 in revealjs is also broken on main as you said, and fixed here.

Both new tests fail on main with assertion failures and pass with the change. With only the brand.ts change applied, the revealjs and mermaid variables still lose their quotes, so the Sass part is needed too.

I also checked a few other brand values: an already quoted family, a stack like Fira Code, monospace, generic families (serif, monospace), the object form with family and color, a dashboard, and a revealjs theme setting its own $mainFont. All come out as expected.

Re-declaring the variables in quarto.scss rather than patching the vendored exposer.scss is the approach I would choose too. Upstream reveal.js still interpolates these without inspect(), and on its main branch this block moved into settings.scss with renamed variables, so a local patch would not survive the next reveal.js update.

I will push a small adjustment to the changelog entry before merging (author attribution, and keeping it to the user-visible symptom), so no need to push anything on your side meanwhile.

cderv added 2 commits October 19, 2026 13:57
The entry gets the external-contributor attribution and keeps to the
user-visible symptom; the CSS variable details stay in the PR description.
The changelog entry claims the mainfont fix in revealjs, which the brand
tests do not cover. This also asserts the inline and block code font
variables. Fails on main on the --r-main-font assertion.
@cderv
cderv merged commit 78877e0 into quarto-dev:main Oct 19, 2026
51 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

brand font family names are not quoted in generated CSS

3 participants