I am using Quarto to create slides with reveal.js. When a title slide is long, I want it to be in a smaller font size, plus other changes. I thought of creating a class to modify the heading when it was too long, but I am not able to apply the class. This what I have in my custom.css file:

.longtitle{
  font-size: 0.7em;
}

This is my qmd code:

---
title: test
format: revealjs
self-contained: true
css: custom.css
---

## Short title

- Item

## Very very long title that goes in two lines

- Item

<h2 class="longtitle">Try to apply the "longtitle" class</h2>

- Not working

I am using Quarto to create slides with reveal.js. When a title slide is long, I want it to be in a smaller font size, plus other changes. I thought of creating a class to modify the heading when it was too long, but I am not able to apply the class. This what I have in my custom.css file:

.longtitle{
  font-size: 0.7em;
}

This is my qmd code:

---
title: test
format: revealjs
self-contained: true
css: custom.css
---

## Short title

- Item

## Very very long title that goes in two lines

- Item

<h2 class="longtitle">Try to apply the "longtitle" class</h2>

- Not working

• quarto
• reveal.js

1 Answer 1

This is because your css gets overwritten by the .reveal h2 styles. Instead, a possibility is to use a span. The css can stay as it is and we use

## [Try to apply the "longtitle" class]{.longtitle}

what defines a span which has the longtitle class, where the span is located inside an h2, so that it is in particular inside a suitable header.

custom.css

.longtitle {
  font-size: 0.7em;
}

index.qmd

---
title: test
format: revealjs
self-contained: true
css: custom.css
---

## Short title

- Item

## Very very long title that goes in two lines

- Item

## [Try to apply the "longtitle" class]{.longtitle}

- Working