font-family: math explainer

Try opening Mozilla MathML Test in Chrome Canary (2021-08-23) with web platform features enabled. You should get something like this:

Default (local fonts) Latin Modern Math (web font)
screenshot, default screenshot, latin modern math

In Chrome Canary (2021-08-23), the font-family is inherited for <math> tags, so MathML would render as in the screenshot of the left, which is not really great.

Per the MathML Core spec, the UA stylesheet should set math { font-family: math } instead. If Blink implements that generic family name and the corresponding UA rule it will instead try to pick a math font for rendering MathML content (for other generic names, this is done by taking the value of a system font from the user preferences).

If the font selected is Latin Modern Math, one would see something similar to the screenshot on the right. You can notice it is more appropriate to render math expressions (e.g. to stretch operators).