display math expression as non-italic using R Markdown and HTML output

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}}$

Solution

Here is the way:

---
title: "Change MathJax font"
author: "Stéphane Laurent"
date: "05/11/2020"
output: html_document
---

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS" : {
    availableFonts : ["STIX"],
    preferredFont : "STIX",
    webFont : "STIX-Web",
    imageFont : null
  }
});
</script>

$$
\int_0^1 f(x) dx = 0
$$

EDIT

Now that does not work. To use different fonts, you have to download them and to use a local copy of MathJax. I tried all the available fonts and the rendering is not nice for all of them.

I think the better solution is to use the standard font and use \mathrm:

$$
\mathrm{\int_0^1 f(x) dx = 0}
$$