Support font stacks with _brand.yml

[mdekstrand]

Description

Right now, there does not seem to be a way to properly use font stacks with _brand.yml. I raised this in posit-dev/brand-yml#111, but learned it seems to be a Quarto-specific issue.

Specifically, the font family: options only take a single string, so you cannot specify a stack as a YAML list.

Specifying the font stack in CSS syntax in the family: passes the stack through to CSS correctly, but has at least two problems:

• If a font in the fonts list does not match the name of a used font, its CSS import seems to be excluded from the generated CSS. Whatever code is responsible for this does not seem to understand CSS font stack syntax.
• CSS font stacks probably don't work in Typst.

Font stacks are useful even when using a specific web font for at least two reasons:

• Specifying a fallback for browsers that have web fonts disabled.
• Specifying fallbacks for symbols not included in the main font (e.g., selecting the emoji font for a site). This works with a font stack in CSS; I don't know if Typst has glyph-level fall-through support.

I can work around this by putting my font stack directly into custom CSS, but was surprised when writing a font stack in _brand.yml caused my web font imports to be excluded (so the site looked correct in quarto preview on my laptop that happened to have the fonts installed as system fonts, but not on other machines).

[mcanouil]

Do you have a concrete example of what you've tried?

Because the following example shows what is expected.

---
format: html
brand: 
  # This works in Shiny (for R/Python)
  typography:
    fonts:
      - family: Quantico
        source: bunny
    base:
      family: Quantico, Arial, serif
---

{{< lipsum 1 >}}

[mdekstrand]

rev 3ba0378f08 of my Notes repo is broken: https://codeberg.org/mdekstrand/nods.ekstrandom.net/src/commit/3ba0378f08bbfb50acaff04bb40da560087ab3ca

_brand.yml:

typography:
  fonts:
    - family: Fira Sans
      source: bunny
      weight: [200, 300, 400, 500, 700]
    - family: Fira Mono
      source: bunny
    - family: Chakra Petch
      source: bunny
      weight: [400, 500, 700]
  base: "'Fira Sans', sans-serif"
  headings: "'Chakra Petch', cursive"
  monospace: "'Fira Mono', monospace"
  monospace-inline:
    size: 1em

A few variants are also broken (e.g., without quotes: base: Fira Sans, sans-serif). The lead font displays correctly if it is installed in my OS, but the web fonts are not loaded. Switching to only the font named in the fonts list correctly loads the web fonts.

This is with Quarto 1.8.27.

[mdekstrand]

Sorry, should have given more context. That error was from running quarto preview in the small demo project linked above.

However, in the single-file example without any project setup, Quarto 1.9.17 renders both versions correctly.

[mdekstrand]

I also think I figured out why the error happened — for testing, I extracted the Quarto pre-release release tarball into a subdirectory of my test project, and I think Quarto tried to scan its own source/assets as if they were part of my project content. Not related to the core issue of this discussion at all.

[mcanouil]

Ok, so the font issues is solved but with 1.9.

I cannot reproduce your quarto preview issue on your small repository.
I suspect your environment is that not "clean" as the issue is about a shortcode (or an extension), but none of that is present in your repository.
How did you install the pre-release?
What's the output or quarto check?
Could you ensure your project is clean and not nested inside another project?

[mdekstrand]

I installed the pre-release by unpacking the release tarball from the download page into a quarto directory within the test project, so the project was definitely not clean.

On another machine, I unpacked it to a different directory not within the project, and it worked correctly. (I'm not at the machine it was broken on right now to get quarto check, but I can upload later if it's still useful. I'm pretty sure the problem was unpacking quarto to a directory inside the project.)

[mcanouil]

if you unpack the tarball inside your project, it explains why there was this error.
Quarto automatically detects markdown files, and there are some in the tarball.