Repository navigation
Quote brand font family names in the generated CSS - #15103
Conversation
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
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
cderv
left a comment
There was a problem hiding this comment.
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.
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.
Description
Fixes #14882.
brandTypographyLayernow runs family values throughasCssFont, the same helper themainfont/monofontpath uses, soSource Sans 3comes out as"Source Sans 3". That's enough forhtml.revealjsneeded one more step. reveal.js'exposer.scssbuilds--r-main-font,--r-heading-fontand--r-code-fontwith#{$mainFont}etc., and interpolation drops the quotes again. That also meansmainfont: Source Sans 3is broken inrevealjstoday, not only the brand path. Rather than edit the vendored file,quarto.scssre-declares those three properties (plus the inline/block code font ones it already sets) with#{inspect(...)}, the way Bootstrap's_root.scssdoes. Quarto's rules come after the framework rules, so these win.--mermaid-font-familyin_quarto-rules.scsshad the same interpolation, so it gotinspect()too.Checked in Chromium:
bodywas computing toTimes; with this changebody,h2andcodecompute to"Source Sans 3","Bricolage Grotesque 96pt"and"M PLUS 1 Code"in bothhtmlandrevealjs.Tests:
2026/10/19/issue-14882.qmd(html) andissue-14882-revealjs.qmd. The revealjs one also asserts that no unquoted declaration comes after Quarto's quoted one, sinceexposer.scssstill writes the unquoted value first. Both fail onmainand pass with this change. I also ran the brand tests, the revealjs tests and everything asserting onfont-family(202 documents, 300 renders across formats): 296 pass, and the other 4 need Jupyter, LaTeX or R and fail the same way onmainon my machine.Checklist
I have (if applicable):
AI-assisted PR