Quarto HTML extension to allow user to select font #14230

maia-sh · 2026-03-18T16:38:59Z

maia-sh
Mar 18, 2026

Is there a Quarto feature or extension that allows a user to select the font (face, size, and style) of an HTML document (e.g., Revealjs slides)?
This would be great for accessibility!

mcanouil · 2026-03-18T18:01:08Z

mcanouil
Mar 18, 2026
Collaborator

Brand.yml? Or regular theming (https://quarto.org/docs/presentations/revealjs/themes.html).

I don't see what an extension would do more than the native options above.

Not sure what you mean by "accessibility".

3 replies

mcanouil Mar 18, 2026
Collaborator

If you meant "being able to interactively change font face, size in a rendered Reveal.js presentation" then look for Reveal.js plugins or make one then packaged it as a Quarto extension.

maia-sh Mar 19, 2026
Author

I meant the latter: "being able to interactively change font face, size in a rendered HTML document, e.g., Reveal.js presentation." An non-interactive alternative would be to allow font specifications in Quarto to be overridden by the user's browser preferences (for example, in Chrome, chrome://settings/fonts).

From your response, it sounds like this would be specific to the HTML document format, e.g. Reveal.js, and that I should look for those plugins. I was hoping this was something that could be set via Quarto.

Regarding accessibility, I meant along the lines of:

An accessible font means using a typeface designed for easy reading by a diverse audience, including individuals with visual impairments such as low vision or reading disability such as dyslexia. Accessible typography ensures that textual information is accessible to all users, irrespective of their abilities or disabilities.

Source: https://www.section508.gov/develop/fonts-typography/

mcanouil Mar 19, 2026
Collaborator

Then it's a plugin you need. (plugins are what provide the "menu" in Reveal.js for example)

Because Quarto cannot take all maintenance burden of everything, Quarto extensions are a good way to transform an idea with rough edges into something more production-ready which could be later integrated (no guarantees), the lightbox extension was integrated into Quarto CLI for example.

da5nsy · 2026-03-24T11:53:07Z

da5nsy
Mar 24, 2026

Looks like this is possible using Firefox settings (and presumably in other browsers too) in about:preferences/Fonts/Advanced, set the Sans-serif font (or others as appropriate) to the desired font, then uncheck "All pages to choose their own font...", click OK.

Before:

After:

a screenshot showing two panels one above another - on the top, a slide in a web browser which says Slide 1 but now in a different font, and below: the settings panel of Firefox showing the font section, showing the sans-serif font switched to CO59 and the 'All pages to choose their own font' toggle unchecked

It would still be nice to have a plug-in that provided a nice little drop-down on the slides themselves.

0 replies

da5nsy · 2026-03-24T12:41:32Z

da5nsy
Mar 24, 2026

Looks like we can use https://github.com/sinanisler/accessibility-widgets by adding <script src="https://cdn.jsdelivr.net/npm/accessibility-widgets@latest/widget.js"></script>.

That then overlaps with the controls, so adding controlsLayout: 'edges', into Reveal.initialize seems wise.

a screenshot showing a slide in a web browser which says Slide 1 with an additional button in the bottom right which is blue circle with a human form inside it. The navigation arrow is on the right edge of the screen rather than the bottom right corner

the same slide as above, but now the button has been clicked and a panel on the right side of the screen is shown, with various accessibility control buttons such as 'Hide Animations' and 'Screen Reader'

MWE code:

Click to expand code

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>

		<title>reveal.js</title>

		<link rel="stylesheet" href="dist/reset.css" />
		<link rel="stylesheet" href="dist/reveal.css" />
		<link rel="stylesheet" href="dist/theme/black.css" />

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="dist/plugin/highlight/monokai.css" />
	</head>
  <script src="https://cdn.jsdelivr.net/npm/accessibility-widgets@latest/widget.js"></script>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>

		<script src="dist/reveal.js"></script>
		<script src="dist/plugin/notes.js"></script>
		<script src="dist/plugin/markdown.js"></script>
		<script src="dist/plugin/highlight.js"></script>
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,
        controlsLayout: 'edges',
				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
			});
		</script>
	</body>
</html>

3 replies

da5nsy Mar 24, 2026

allows a user to select the font (face, size, and style)

It only allows fairly basic font control, but it's something, and presumably we could tweak it as needed if we want specific control.
(Though I don't think the UI would be easily modified to allow arbitrary font selection - I think my other suggestion which involved changing the browser settings might be better for that)

mcanouil Mar 24, 2026
Collaborator

@da5nsy Talking about accessibility.

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

Important

Accessibility: For better accessibility, please ensure link text is descriptive and meaningful rather than using generic terms such as "here". This helps all users understand the link's destination. See Writing meaningful link text (WCAG).

da5nsy Mar 24, 2026

Oop, good point, will edit now.

Quarto

Quarto HTML extension to allow user to select font #14230

Uh oh!

Uh oh!

maia-sh Mar 18, 2026

Replies: 3 comments · 6 replies

Uh oh!

Uh oh!

mcanouil Mar 18, 2026 Collaborator

Uh oh!

mcanouil Mar 18, 2026 Collaborator

Uh oh!

maia-sh Mar 19, 2026 Author

Uh oh!

mcanouil Mar 19, 2026 Collaborator

Uh oh!

Uh oh!

da5nsy Mar 24, 2026

Uh oh!

Uh oh!

da5nsy Mar 24, 2026

Uh oh!

Uh oh!

da5nsy Mar 24, 2026

Uh oh!

Uh oh!

mcanouil Mar 24, 2026 Collaborator

Uh oh!

da5nsy Mar 24, 2026

maia-sh
Mar 18, 2026

Replies: 3 comments 6 replies

mcanouil
Mar 18, 2026
Collaborator

mcanouil Mar 18, 2026
Collaborator

maia-sh Mar 19, 2026
Author

mcanouil Mar 19, 2026
Collaborator

da5nsy
Mar 24, 2026

da5nsy
Mar 24, 2026

mcanouil Mar 24, 2026
Collaborator