It is customary to show math in italics (the tradition dates to Ancient Greece). But for informal presentations, I don't really like the way it looks. I am trying to use my own font for math display, or at least to get rid of the italics. It's simple to alter the math font for pdf_document: using mathfont: my-math-font and latex_engine: xelatex in the YAML, but for an HTML output it is proving more complex.
Obviously, MathJax is used to render the equations via Pandoc. I have tried adding CSS rules via an external CSS file, or directly below the YAML as suggested in this stackoverflow question. Evidently Pandoc applies a class .math { } to all MathJax expressions...However I don't know much CSS so getting the arguments correct has proven difficult. As far as I can tell, my extra CSS rules are just being ignored because the italics persist when I knit in R Studio.
I hope someone has a solution? Here is a minimal example of the code I am using; to reproduce it simply copy-paste into a .Rmd file and knit with ctrl + shift + k :
---
title: "How to change math font for HTML output?"
output:
html_document
---
```{css}
.math {
font-family: Sans-Serif;
font-style: normal;
}
```
This math equation is still rendered with italics: $\rho~=~\frac{m_{water}}{m_{oven-dry~soil}}$