Search code examples
cssquarto

How to change the default font size in quarto speaker notes

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.

Solution

  • 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

    enter image description here