I am unable to get MathJax to change the font that it is using to render formulas written in AsciiMath. I have read the answers to similar questions here at StackOverflow and other places on the web:
- Styling MathJax
- Changing mathjax's font size
- MathJax font matching and pairing
- Can MathJax use font xxxx?
Here is an entire HTML5 document that I am using as a test case:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MathJax Font</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"CommonHTML" : { preferredFont:"Asana Math" }
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML"></script>
</head>
<body>
<p>`v = pi r^2`</p>
</body>
</html>
What am I doing wrong? Please help me change the font for MathJax.
Answer
I found this at docs.mathjax.org/en/latest/output.html
The CommonHTML output processor produces high-quality output in all modern browsers, with results that are consistent across browsers and operating systems. This is MathJax’s primary output mode since MathJax v2.6. Its major advantage is its quality, consistency, and speed as well as support for server-side generation. Its browser supports starts with IE9 and equivalent browsers and it degrades gracefully on older browsers. The CommonHTML output uses web-based fonts so that users don’t have to have math fonts installed on their computers. It currently only supports MathJax’s default TeX fonts.
I had to change my file to use the HTML-CSS output processor instead of the CommonHTML output processor. After the change my test file now looks like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MathJax Font</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS" : {
availableFonts : ["STIX"],
preferredFont : "STIX",
webFont : "STIX-Web",
imageFont : null
}
});
</script>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML"></script>
</head>
<body>
<p>`v = pi r^2`</p>
</body>
</html>