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:
styles_def.css
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 ;
}
document.qmd
---
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.
0