`monofont` no longer works since 1.6.27

[mcanouil]

It appears monofont no longer works at least for html (it seems to be a (S)CSS rule issue)

---
format:
  html:
    monofont: 'Fira Code'
    embed-resources: true
---

`inline code`

```r
# This is a comment
print("Hello, World!")
```

• Working on 1.6.26
• Not working on 1.6.27

v1.6.26...v1.6.27

[mcanouil]

It seems the faulty commit is: 6a1bdba (it does not compile without 4702f46 but the variables are not related to the issue)

[cderv]

monofont is supposed to be passed to font-family-code SCSS variable

quarto-cli/src/format/html/format-html-scss.ts

Line 470 in a172c18

add(explicitVars, "font-family-code", metadata["monofont"], asCssFont);

Though I see we have in https://quarto.org/docs/output-formats/html-themes.html#fonts font-family-monospace

and both seems to be a bit different

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_variables.scss

Lines 612 to 618 in a172c18

	// scss-docs-start font-variables
	// stylelint-disable value-keyword-case
	$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
	$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
	// stylelint-enable value-keyword-case
	$font-family-base: $font-family-sans-serif !default;
	$font-family-code: $font-family-monospace !default;

The font-family-code is used only is few places

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 1936 to 1938 in a172c18

	dl.code-annotation-container-grid {
	dt {
	font-family: $font-family-code;

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_reboot.scss

Lines 286 to 294 in a172c18

	// Code
	pre,
	code,
	kbd,
	samp {
	font-family: $font-family-code;
	@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
	}

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 2000 to 2009 in a172c18

	code.sourceCode .code-annotation-anchor {
	font-family: $font-family-code;
	color: var(--quarto-hl-co-color);
	border: solid var(--quarto-hl-co-color) 1px;
	border-radius: 50%;
	height: 18px;
	width: 18px;
	font-size: 9px;
	margin-top: 2px;
	}

What the PR

• brand,fonts,bootstrap - add support for weight+size+color customization #11028
  introduced is new rules that will take higher specificity in CSS

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 2163 to 2165 in 4c44c81

	// code blocks
	pre {
	font-family: $font-family-monospace-block;

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 2163 to 2165 in 4c44c81

	// code blocks
	pre {
	font-family: $font-family-monospace-block;

Those variables were introduced in the PR #11028

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-variables.scss

Lines 264 to 265 in 4c44c81

	$font-family-monospace-block: $font-family-monospace !default;
	$font-family-monospace-inline: $font-family-monospace !default;

And they are using $font-family-monospace not $font-family-code

Interesting thing to note is that on revealjs side, monofont is allocated to font-family-monospace, so no problem

quarto-cli/src/format/reveal/format-reveal-theme.ts

Line 272 in 4c44c81

add(explicitVars, "font-family-monospace", metadata["monofont"], asCssFont);

So on HTML, $font-family-code and $font-family-base are specific

quarto-cli/src/format/html/format-html-scss.ts

Lines 481 to 482 in 4c44c81

	add(explicitVars, "font-family-base", metadata["mainfont"], asCssFont);
	add(explicitVars, "font-family-code", metadata["monofont"], asCssFont);

Should font-family-code be used for the monospace-inline and monospace-block?
Or should they be removed in favor of font-family-monospace only?

Or maybe this is more adaptation. font-family-monospace and font-family-code are both defined in Bootstrap directly, and why we have both in Quarto
https://github.com/rstudio/bslib/blob/7cf80506c6beb9d7e5f2f146d2c9c935bbaf1635/inst/lib/bs5/scss/_variables.scss#L612-L618

So it seems they have different meanings, but I have a hard time seeing the exact difference

In bootstrap font-family-code is used for different object like pre and code
https://github.com/rstudio/bslib/blob/7cf80506c6beb9d7e5f2f146d2c9c935bbaf1635/inst/lib/bs5/scss/_reboot.scss#L286-L294

// Code

pre,
code,
kbd,
samp {
  font-family: $font-family-code;
  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}

and we do same in quarto

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_reboot.scss

Lines 286 to 294 in 4c44c81

	// Code
	pre,
	code,
	kbd,
	samp {
	font-family: $font-family-code;
	@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
	}

but we also try to 'redo' the _reboot.scss in a different way

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 2161 to 2187 in 4c44c81

	// override _reboot.scss
	// code blocks
	pre {
	font-family: $font-family-monospace-block;
	// I'm really not confident that this is correct
	@include font-size($code-block-font-size);
	font-weight: $font-weight-monospace-block;
	// adding these inherit overrides here
	// is what `_reboot.scss` does.
	// we mirror it here for consistency
	//
	// Account for some code outputs that place code tags in pre tags
	code {
	font-family: inherit;
	@include font-size(inherit);
	font-weight: inherit;
	}
	}
	// code inlines
	code {
	font-family: $font-family-monospace-inline;
	@include font-size($code-inline-font-size);
	font-weight: $font-weight-monospace-inline;
	}

And this is where monofont, being font-family-code, is lost.

So after all this is a brand related discussion too

[cscheid]

As a simple workaround, one could use brand in immediate mode:

brand:
  typography: 
    monospace:
      family: 'Fira Code'

We still want to fix it, but the regression urgency is lessened now that I know of the workaround.