relnote(Fx145): basic font-family: math characters

[bsmth]

Description

Adding a few relevant characters to the math example.

Motivation

There wasn't really anything that shows much of the benefit of this. This is something minimal to at least show a few characters that look better with this style.

Feedback welcome on other ideas, but I think the original isn't too helpful by itself.

Related issues and pull requests

• parent: [MathML][CSS] Implement font-family: math #41506

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/Reference/Properties/font-family

Flaws (4)

URL: /en-US/docs/Web/CSS/Reference/Properties/font-family
Title: font-family
Flaw count: 4

• macros:
  • Macro produces link /en-US/docs/Web/CSS/font which is a redirect
  • Macro produces link /en-US/docs/Web/CSS/font-style which is a redirect
  • Macro produces link /en-US/docs/Web/CSS/font-weight which is a redirect
  • Macro produces link /en-US/docs/Web/CSS/font-variant-emoji which is a redirect

(comment last updated: 2025-10-31 11:26:17)

[bsmth]

@fred-wang do you have any thoughts for something nice here for demos?

[chrisdavidmills]

Looks good to me, @bsmth. I've got a couple of small comments, but nothing blocking:

1. I wonder if you want to give the start of the new sentence the same form as the others, i.e., "This is an example of...". I'm not sure it matters really.
2. Do you also want to give each <div> some bottom margin, so the sentences are less squashed together?

[fred-wang]

@bsmth:

I'm not sure there is a nice example to demo.

Basically, if you use math characters they would either be displayed as tofu or picked from a font installed on your system. font-family: math only says to try to use math fonts from the font.name-list.serif.x-math preference list so they would be all picked from the same font, but if none of them is installed on your system you won't see a difference anyway.

It is particularly important to use math fonts for MathML formulas, if you don't the rendering would be very bad for things like

<math display="block">
  <msqrt>
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>10</mn>
        <msup>
          <mi>n</mi>
          <mn>4</mn>
        </msup>
      </mfrac>
    </mrow>
  </msqrt>
</math>

In the past, Firefox had some internal hacks to make sure the font.name-list.serif.x-math preference list is used on a <math> element. Now, the UA stylesheet sets math { font-family: math } on the <math> element which should provide something equivalent. And even if you specify a different font-family, I believe it will still try to fallback to font.name-list.serif.x-math for backward-compat reason. So you won't really see a difference either.

cc @eerii

[bsmth]

Thanks @chrisdavidmills:

1. I wonder if you want to give the start of the new sentence the same form as the others, i.e., "This is an example of...". I'm not sure it matters really.

I thought about this, but I think it's a little redundant for the math case.

2. Do you also want to give each <div> some bottom margin, so the sentences are less squashed together?

Yessir!

[eerii]

As Fred mentioned, it allows using math { font-family: math } for specifying that some content should use the font.name-list.serif.x-math preference list. We tried getting rid of x-math but it is not feasible at the moment because of how the preference system works. So the hack is still there, only now it matches a bit better with the specification.

As for an example, I can't think of a better one either. It is going to be very dependent on what system and fonts the user has. Here is a comparison between Linux and Android. On Linux you can install fonts that match the font list, so it uses those for math. On Android there isn't any math font, so it is as if the preference doesn't exist. This is what it would look if we didn't set font-family: math (or have the previous hacks) on other platforms.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[bsmth]

Thank you @eerii and @fred-wang, I'll leave the updates to be quite minimal then for the moment (limited to 25ac0a2), the context we have from your replies is already quite helpful.

[bsmth]

Thanks all, I'm going to merge in the current state for now.