LordLing - 7 months ago 46
HTML Question

# MathML in HTML5: changing math font

Let's say I have an HTML5 document with some MathML in it. I set the font of the body of the page but it doesn't change the font used for MathML characters:

<!DOCTYPE html>
<html lang="en">
<title>Example of MathML embedded in an HTML5 file</title>
<meta charset="utf-8" />
<body style="font-family: courier;">
$<mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="prefix">−</mo> <mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow>$
</body>
</html>


This will display the text "Quadratic formula" in courier but the MathML stays in the default page font. How can I change the font used for MathML?

One of the Mozilla MathML developers seems to blog quite regularly. There are two recent posts which will be of interest to you:
The upshot seems to be that, in order to guarantee decent rendering of MathML, you need your users to install either MathJax, STIX or Asana Math fonts.