I'm building a template .css
for my brand which will be used by Quarto to render HTML docs. This page shows how to insert a term
(scroll down to the bottom of Lists
). In the rendered HTML, the term
appears in a default font, but I would like to see it in the regular paragraph font.
Here is my .css
. There are font exceptions for in-line equations (there are equations in my doc that I don't want in Aktiv Grotesk).
p, span:not(.math.inline) {
font-size: 11pt;
font-family: 'Aktiv Grotesk';
color:black
}
span:not(.math.inline) {
font-family: 'Aktiv Grotesk', Times, serif ;
}
Here is my Quarto doc:
---
title: Term Font
format:
html:
css: styles_def.css
---
## Definitions
Definitions can be inserted in the document by using a colon, space, then the definition. Each definition needs to be separated by a line feed.
Noun
: A person, place, or thing.
Verb
: An action word.
And here is the output:
How do I refine my .css
file to use the same font for terms
?
Terms are rendered into definition lists (or description lists), <dl>
, see e.g. 8.7.4.1 within the Pandoc Guide. Hence, in your example the HTML
looks like this:
<dl>
<dt>Noun</dt>
<dd>
A person, place, or thing.
</dd>
<dt>Verb</dt>
<dd>
An action word.
</dd>
</dl>
Thus, you can add dl
, dt
or dd
to your css
, depending on what you need. If you for example want to apply the styles for the whole list, you could use:
p, span:not(.math.inline), dl {
font-size: 11pt;
font-family: 'Aktiv Grotesk';
color:black
}
span:not(.math.inline), dl {
font-family: 'Aktiv Grotesk', Times, serif ;
}
---
title: Term Font
format:
html:
css: styles_def.css
---
## Definitions
Definitions can be inserted in the document by using a colon, space, then the definition. Each definition needs to be separated by a line feed.
Noun
: A person, place, or thing.
Verb
: An action word.