brand font family names are not quoted in generated CSS
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 84/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- css, sass, typescript
Línea de trabajo
Comienza en src/core/sass/brand.ts, en brandTypographyLayer, y compara el manejo de familias con asCssFont en src/core/css.ts y la ruta mainfont existente en src/format/html/format-html-scss.ts. Renderiza el ejemplo HTML autocontenido e inspecciona el CSS de Bootstrap generado. Se considera terminado cuando las declaraciones brand font-family están entre comillas de forma consistente y Source Sans 3 se aplica en la salida HTML y revealjs sin afectar a Typst.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
I have:
- searched the issue tracker for similar issues
- installed the latest version of Quarto CLI
- formatted my issue following the Bug Reports guide
Bug description
A brand font family whose name contains a bare number does not apply in HTML output. The text falls back to the browser default serif font.
Quarto writes the family name into the generated CSS without quotes. For Source Sans 3 the output is font-family:Source Sans 3. A bare 3 is not a valid CSS identifier, so the browser discards the whole declaration.
The @import for the font is correct and the font downloads. This makes the problem look like a font-loading error, but the font is never used.
Quotes in the YAML do not help. Quarto strips them before it generates the CSS.
The same family name works when it is set with document metadata instead:
mainfont: Source Sans 3 # produces font-family:"Source Sans 3" — works
Related but different: #11947 reports Source Sans 3 as a _brand.yml font, and that thread diagnosed a Typst font-name mismatch. The HTML side was noted as unexplained there. This issue is the HTML cause.
Steps to reproduce
Render this self-contained document to HTML:
---
title: Font test
format: html
brand:
typography:
fonts:
- family: Source Sans 3
source: google
base: Source Sans 3
---
Hello world.
Open the result in a browser, or read the generated index_files/libs/bootstrap/bootstrap-*.min.css.
A _brand/_brand.yml file with the same typography block produces byte-identical CSS.
Actual behavior
The generated CSS holds the family name without quotes:
@import"https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,700;1,400;1,700&display=swap";
...
:root,[data-bs-theme=light]{...--bs-body-font-family: Source Sans 3;...}
...
font-family:Source Sans 3
The computed font-family on body in Chromium is Times.
Scope, measured on Quarto 1.11.4:
| Element | Affected | Note |
|---|---|---|
base |
yes | $font-family-base, $mainFont, $mermaid-font-family |
headings |
yes | $headings-font-family, $presentation-heading-font |
monospace, monospace-inline, monospace-block |
yes | falls back to generic monospace |
link |
no | link has no family property in the schema |
| Format | Affected |
|---|---|
html |
yes |
revealjs |
yes (--r-main-font, --r-heading-font, --r-code-font) |
typst |
no — the Typst emitter writes font: ("Source Sans 3",), always quoted |
| Font source | Affected |
|---|---|
google |
yes |
bunny |
yes |
file |
yes |
The file source shows the inconsistency inside one stylesheet. The @font-face rule quotes the family, the variable that uses it does not:
@font-face{font-family:"My Font 3";src:url("fonts/myfont.woff2");font-weight:400;font-style:normal}
...
font-family:My Font 3
The trigger is any family name with a space-separated part that starts with a digit. Source Sans 3, Bricolage Grotesque 96pt, M PLUS 1 Code and M PLUS Rounded 1c all fail. Roboto Mono works, because both parts are valid identifiers.
Cause
brandTypographyLayer interpolates the value straight into the Sass variable, with no quoting for family names:
A helper for this already exists. asCssFont quotes any font name that contains a space:
It is used for the mainfont and monofont metadata path, which is why mainfont: Source Sans 3 works:
The brand path does not use it. Applying asCssFont when source is family would match the existing metadata path, the @font-face rule that fileFontImportString already emits with quotes, and Bootstrap's own defaults in the same stylesheet (--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, …).
Expected behavior
The generated CSS quotes the family name, and the font applies:
font-family:"Source Sans 3"
With the quotes added by hand to the generated stylesheet, the computed font-family on body becomes "Source Sans 3" and the font renders.
Your environment
- IDE: Positron 1.130.0
- OS: macOS 26.6.2 (build 25G83)
AI assistance was used to investigate this, grounded in a local clone of the repository, as described in Using AI tools to investigate.
Quarto check output
Quarto 1.11.4
[✓] Checking environment information...
Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.10.0: OK
Dart Sass version 1.101.0: OK
Deno version 2.7.14: OK
Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.11.4
Path: /Applications/quarto/bin
[✓] Checking tools....................OK
TinyTeX: v2026.04
Chrome Headless Shell: 150.0.7871.115
VeraPDF: 1.28.2
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
Version: 2026
[✓] Checking Chrome Headless....................OK
Using: Chrome Headless Shell installed by Quarto
Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
Version: 150.0.7871.115
[✓] Checking basic markdown render....OK
[✓] Checking R installation...........OK
Version: 4.5.2
Path: /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources
LibPaths:
- /Users/charlottewickham/Library/R/arm64/4.5/library
- /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/library
knitr: 1.51
rmarkdown: 2.30
[✓] Checking Knitr engine render......OK
[✓] Checking Python 3 installation....OK
Version: 3.12.2
Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
Jupyter: 5.9.1
Kernels: python3
[✓] Checking Jupyter engine render....OK
[✓] Checking Julia installation...
- Lenguaje dominante
- JavaScript
- Estrellas
- 6k
- Forks
- 458
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 42
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de quarto-dev/quarto-cli
-
documentation
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
quarto-dev/quarto-cli#14915 ·
-
binder bug
Dificultad 1/5 Menos de una hora Aptitud para principiantes 92/100
quarto-dev/quarto-cli#14907 · 3 comentarios · 1 reacción ·
-
brand bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
quarto-dev/quarto-cli#14891 ·
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
quarto-dev/quarto-cli#14875 ·
-
Percent scripts: accept raw-string (r""") and '''-delimited markdown cells, as jupytext writes them Abiertoengines-jupyter enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
quarto-dev/quarto-cli#14850 · 2 comentarios ·
Todos los issues de quarto-dev/quarto-cli
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
HarperFast/skills#96 ·
-
[Block] Latest Posts [Type] Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
-
Daemon passes --experimental-wasm-jspi unconditionally on Node >= 24; Node 26 rejects the flag Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Automattic/studio#4908 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
sugarlabs/musicblocks#8847 ·