MathJax 3 currently only supports one font, the usual MathJax TeX fonts, but version 4 (currently in
alpha release) provides 11 fonts to choose from, and one of them is a sans-serif font (mathjax-fira). But the MathJax TeX fonts do include sans-serif characters, and it is possible to use those for letters and numbers in v3. The following configuration does that:
MathJax = {
startup: {
ready() {
const CommonWrapper = MathJax._.output.common.Wrapper.CommonWrapper;
const getVariant = CommonWrapper.prototype.getVariant;
const remap = {
normal: 'sans-serif',
italic: 'sans-serif-italic',
bold: 'bold-sans-serif',
'bold-italic': 'sans-serif-bold-italic',
'-tex-mathit': 'sans-serif-italic'
};
CommonWrapper.BOLDVARIANTS.bold.normal = 'bold-sans-serif';
CommonWrapper.BOLDVARIANTS.bold.italic = 'sans-serif-bold-italic';
CommonWrapper.BOLDVARIANTS.normal.bold = 'sans-serif';
CommonWrapper.BOLDVARIANTS.normal['bold-italic'] = 'sans-serif-italic';
CommonWrapper.ITALICVARIANTS.italic.normal = 'sans-serif-italic';
CommonWrapper.ITALICVARIANTS.italic.bold = 'sans-serif-bold-italic';
CommonWrapper.ITALICVARIANTS.normal.italic = 'sans-serif';
CommonWrapper.ITALICVARIANTS.normal['bold-italic'] = 'bold-sans-serif';
CommonWrapper.prototype.getVariant = function () {
getVariant.call(this);
this.variant = remap[this.variant] || this.variant;
};
MathJax.startup.defaultReady();
}
}
}
If you are using version 2, then using
<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {
var VARIANT = MathJax.OutputJax["HTML-CSS"].FONTDATA.VARIANT;
VARIANT["normal"].fonts.unshift("MathJax_SansSerif");
VARIANT["bold"].fonts.unshift("MathJax_SansSerif-bold");
VARIANT["italic"].fonts.unshift("MathJax_SansSerif-italic");
VARIANT["-tex-mathit"].fonts.unshift("MathJax_SansSerif-italic");
});
MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () {
var VARIANT = MathJax.OutputJax.SVG.FONTDATA.VARIANT;
VARIANT["normal"].fonts.unshift("MathJax_SansSerif");
VARIANT["bold"].fonts.unshift("MathJax_SansSerif-bold");
VARIANT["italic"].fonts.unshift("MathJax_SansSerif-italic");
VARIANT["-tex-mathit"].fonts.unshift("MathJax_SansSerif-italic");
});
</script>
somewhere BEFORE the script that loads MathJax.js itself would do something similar.
I'm not sure what you mean by "change the font for the entire document" unless it means change the MathJax font for every expression all at once. The code samples above do that. If you mean change the text font used by the document, you would use normal CSS rules for that.
Davide