How to use the same math font in HTML and PDF?

[benkeks]

In Quarto's default rendering, HTML and PDF use different math fonts:

$$\mathcal P (\mathbb N) ≠ \varnothing$$

will render in HTML/MathJax (and almost identically in KaTeX) as:

and in PDF/LaTeX with XeLaTeX engine as:

I'm trying to write a Quarto book with consistent presentation between HTML and PDF version.

I have been trying around with several mathfont: settings and manual \setmathfont{...} in my LaTeX preamble, but I can't seem to find a setting that comes close to the browser version. Which one to use? … or how to nicely align the font style the other way around?

(Ideally, it would just be the same glyphs in PDF as in KaTeX; and for other compatibility reasons, I cannot fallback to pdflatex.)

Reproducible Document

---
title: "Reproducible Quarto Document"
format: pdf # html
pdf-engine: xelatex
html-math-method: katex
---

$$\mathcal P (\mathbb N) ≠ \varnothing$$

[mcanouil]

HTML fonts have fallbacks if the font does not exist on the computer displaying the page, especially if the font is not provided with the page.
The font might change depending on the Math JavaScript library being used (default is MathJax in Quarto).

So you can check the library and/or use your favourite browser to look for the font being used and use the same.
Or alternatively, use CSS or the library configuration tooling to change the font there.

For example, the MathJax documentation: https://docs.mathjax.org/en/latest/output/fonts.html

[benkeks]

I've now found out through which hoops to jump in order to make the XeLaTeX/PDF-output look akin to LaTeX's original PDF style / MathJax:

This is generated from:

---
title: "Reproducible Quarto Document"
pdf-engine: xelatex
html-math-method: katex
format:
    pdf:
        mathfont: NewCMMath-Regular.otf
        include-in-header:
            text: |
                \DeclareMathAlphabet{\mathcal}{OMS}{cmsy}{m}{n}
                \setmathfont{Linux Libertine O}[range={\varnothing}]
---

$$\mathcal P (\mathbb N) ≠ \varnothing$$

Tricks:

• Use NewCMMath as math font. (This fixes most symbols that I cared about... The ℕ in the example.)
• Use the original mathcal symbols from computer modern by \DeclareMathAlphabet{\mathcal}{OMS}{cmsy}{m}{n}
• Overwrite the ∅-glyph to come from a font where it looks closer to the standard \varnothing output. (In this case, Linux Libertine.)

(The workaround can be shortened a bit by using \usepackage[varnothing]{fontsetup} for https://ctan.org/pkg/fontsetup. But this also interferes with other fonts.)