Does the mainfont option support lists of fonts?

[jimjam-slam]

Description

The HTML reference describes the mainfont option as:

For HTML output, sets the CSS font-family on the HTML element.

You could either read "sets the CSS font-family as "set a single font family" or "set the font-family option... I had read it as the latter and assumed that it would accept any value that font-family can take in CSS.

However, if I set mainfont to a comma-separated list of fonts, it appears to duplicate any double-quotes used in any of the names. Creating a website with quarto create and then setting format.html.mainfont to any of the following fails:

# these all produce `--bs-body-font-family: Creepster, "" Cascadia Code "", Inter`
mainfont: Creepster, "Cascadia Code", Inter
mainfont: 'Creepster, "Cascadia Code", Inter'
mainfont: "Creepster, \"Cascadia Code\", Inter"

# this works! `--bs-body-font-family: Creepster, Arial, Inter`
mainfont: Creepster, Arial, Inter

# this produces `--bs-body-font-family: "Cascadia Code"`
# (double quotes aren't consumed... or are added back by quarto?)
mainfont: "Cascadia Code"

If it was intended that this option only support one font, that's okay! I wanted to clarify because we've added some font YAML options to Closeread, and we noticed that the same YAML string for our font option and the mainfont option lead to different CSS custom property values being emitted.

Options going in:

mainfont: 'et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif'
cr-style:
  narrative-font-family: 'et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif'

Property values coming out:

--cr-narrative-font-family: et-book, Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia, serif;
--bs-body-font-family: et-book, Palatino, "" Palatino Linotype "", "" Palatino LT STD "", "" Book Antiqua "", Georgia, serif;

Thanks!

[mcanouil]

I don't think mainfont supports multiple fonts (it would likely have been mainfonts otherwise).

LaTeX has a mainfontfallback.
HTML has the following SCSS variable: https://quarto.org/docs/output-formats/html-themes.html#fonts

Note that mainfont is originally from Pandoc (https://pandoc.org/MANUAL.html#variables-for-html).
Worth testing directly with Pandoc to check that the limitation was not introduced by Quarto.

[jimjam-slam]

I'll do some testing and get back to you!

[jimjam-slam]

It seems that this does indeed work with Pandoc, so it might be something that Quarto is introducing.

index.md:

---
title: "Font test"
mainfont: 'Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif'
---

# Header 1

Hello hello!

Nulla ea qui velit sit laboris...

Converted to HTML with quarto pandoc --standalone -o test-mainfont.html test.md produces HTML with this in a style tag in the head:

html {
      font-family: Palatino, “Palatino Linotype”, “Palatino LT STD”,
    “Book Antiqua”, Georgia, serif;
      color: #1a1a1a;
      background-color: #fdfdfd;
    }

And that rule goes through to the text. No problems with quotes!

[mcanouil]

What if you don't use the double quotes?

mainfont: 'Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif'

Using current development version, I get:

--bs-body-font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

I think the TypeScript function does not support the double quotes, it actually adds them hen it detects space.

• quarto-cli/src/core/css.ts

  Lines 85 to 103 in adc7186

  	export function asCssFont(value: unknown): string | undefined {
  	if (!value) {
  	return undefined;
  	} else {
  	const fontFamily = String(value)
  	.split(",")
  	.map((font) => {
  	font = font.trim();
  	if (font.includes(" ")) {
  	font = `"${font}"`;
  	}
  	return font;
  	})
  	.filter((font) => font.length > 0)
  	.join(", ");
  	return `${fontFamily}`;
  	}
  	}

adding && !font.includes('"') at line 93 could fix this but that's not a very general fix. (cc @cscheid)

[cderv]

I think this should be fixed. I'll submit a PR for it

EDIT: #11389

[jimjam-slam]

Oh, that's interesting! Can't believe I didn't think to test just not adding the quotes. Cheers!