I need to create a document where different blocks of text have different fonts and font size. So for example something like.

---
title: "My Document"
mainfont: Latin Modern Roman
---

This section is in the normal Latin Modern Roman font. 

::: {.special_font_1}
This text is in a Gentium font
:::

Some more in the regular font

::: {.special_font_2}
Yet more text, but in an Arial font.
:::

Final text in normal Latin font.

Now I was wondering if I can do this kinda thing using CSS, or if
this would not work. I don’t really want callouts, though I am using
the callout syntax in the example above. Or is it better to use some HTML tag or something?
I want to make sure that the output in HTML and PDF will use the same
formatting and fonts.

I am also not clear on how to setup the CSS settings to set the font in
quarto. Would I do something as above, like .special_font_1 { font-family: Gentium },
or is something more required.