htmlcssquarto

.css to specify math font using Quarto and knitting to HTML

I'm using .css file to style my R Quarto reports to render using the font Aktiv Grotesk. However, when I insert an equation I'd like to use a different font because the square root symbol renders like this:

enter image description here

This is my Quarto file:

---
format: 
  html:
    css: styles2.css
---

Tilt magnitude is calculated using $Mag = \sqrt{N^{2} + W^{2}}$.

This is my styles2.css file:

p {
  font-size: 11pt;
  font-family: 'Aktiv Grotesk';
  color:black

}
* {
  font-family: 'Aktiv Grotesk', Times, serif ;
}

Is there a .css command that will allow me to style the equation font separately? If not, how can I achieve a textbook equation without changing the report font?

Solution

  • The relevant css selectors which you could use are

    In your example, we could disable the css with the special font and set a separate color like this:

    document.qmd

    ---
format: 
  html:
    css: styles2.css
---

Tilt magnitude is calculated using $Mag = \sqrt{N^{2} + W^{2}}$.

    styles2.css

    p, span:not(.math.inline) {
    font-size: 11pt;
    font-family: 'Aktiv Grotesk';
    color:black
}

span:not(.math.inline) {
    font-family: 'Aktiv Grotesk', Times, serif ;
}

span.math.inline {
    color: red;
}

    enter image description here