How to change the default font size in quarto speaker notes

Question

I am trying to reduce the font size for speaker notes in Quarto's revealjs format. My CSS file looks like this:

.slides h1 {
    font-size : 150%;
}

.slides h2 {
    font-size: 140%;
}

.speaker-notes { 
    font-size: 4px; 
}        

/* .show-speaker-notes .speaker-notes { */
/*     font-size: 4px;  */
/* } */
/* .slides .speaker-notes {  */
/*     font-size: 4px;  */
/* }         */
/* .slides speaker-notes {  */
/*     font-size: 4px;  */
/* }         */

The font changes for h1 and h2 work as expected. But I can't figure out how to tweak speaker notes. I've commented out things I tried that didn't work.

I realize that once speaker notes are loaded, it's possible to use Ctrl-- and Ctrl-+ to change the relative font size. But it seems like the default should be adjustable. Also, I don't really want 4px -- that was just to make the change obvious.

Answer 1

Update:

I have actually a made Quarto Extension filter style-speaker-note that allows to write css style in a css file and apply those for speaker notes font or other components. Read the repo readme to know about "Installation", "how to use" and for more examples.

---

You can include a CSS chunk inside the {.notes} Divs. And then in that CSS chunk define a CSS class and specify all the CSS properties you want for that class. And then use that class for elements that you want to change. (Of course, you can define more than one CSS class, but all of them have to be inside that .notes div.

---
title: "Changing styles of Speaker notes."
format: revealjs
engine: knitr
---

## A Slide with speaker notes


Slide content

:::: {.notes}

```{css, echo=FALSE}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

.change-note {
  font-size: 14px;
  font-family: 'IBM Plex Mono', monospace;
  background-color: #D4FFE9;
}
```

Here are the notes.

::: {.change-note}

These fonts are in smaller size and with different font family.

:::

and these are larger in size.

::::

---

---

Now two important things to note,

• Since Quarto generates separate HTML bodies for the speaker notes for each different slide, the defined CSS class can only be used for that specific slide note where you defined it.

• And (though it is not relevant to the question, just saying for avoiding any confusion) I have used engine: knitr for the above reprex, otherwise it would be rendered using jupyter kernel (since the very first code chunk quarto finds, a CSS chunk).

Answer 2

Custom CSS provided to the css: key in the YAML header of your .qmd is not used by reveal.js' speaker notes plugin (CSS classes like speaker-notes live in a separate CSS file [...]/libs/revealjs/dist/reveal.css).

You could use ::: blocks to generate divs and apply inline CSS. Here's an example:

## A Slide with speaker notes

Slide content

::: {.notes}

Here are your notes

::: {style="font-size:14px"}

... and here are some small-font notes.

- This doesn't break markdown.

:::

We're larger, again

:::

Result