Hosted MathJax do CDN requests for dynamic font

[MaxencePaulin]

Issue Summary

I use MathJax 4.1.0 only for typesetPromise([specificEl]). So i host MathJax on a Laravel application (installed via NPM).

It works. But i recently add a CSP and prevent script execution. But tex-chtml.js do a CDN request for chtml/dynamic/latin.js on default font (mathjax-newcm). I only config MathJax to prevent typeset on load and to disable some feature.

But mathjax-newcm is installed via npm too...

I tried to set dynamicPrefix in chtml config option to target local mathjax-newcm. I think it works but i have a new warning like No version information available for component. It's normal ? Should have to change something ?

Steps to Reproduce:

1. Install MathJax 4.1.0 via NPM on web app (with default font = no specific configuration on MathJax object)
2. Add a CSP self / nonce
3. Try to typesetPromise on LaTeX formula and watch console (a CDN request for latin.js should be visible)

If you add dynamicPrefix on chtml in MathJax config object, you will see a warning No version information available for component

Technical details:

• MathJax Version: 4.1.0
• Client OS: Ubuntu 24.04
• Browser: Brave 1.86.148

I am using the following MathJax configuration:

MathJax = {

};

and loading MathJax via NPM exposed on link :

<script src="https://exemple.com/mathjax/tex-mml-chtml.js"></script>

Supporting information:

CDN request when i use typesetPromise.

When i use this config :

MathJax = {
    chtml: {
        dynamicPrefix: "my_url_to_exposed_dynamic_font"
    }
};

The CSP error disapear but a warning appear in console : No version information available for component https://exemple.com/mathjax/chtml/dynamic/latin.js

(The url match with the dynamicPrefix)

I hope you can tell me if it's meaning latin.js is not load (unwanted behavior) and if there is a better solution for use MathJax without CDN request 😁

[dpvc]

There is an easier way to tell MathJax that you are hosting your own copy of mathjax-newcm (or whatever font you are using), which is to set the mathjax-newcm path in the loader.paths object:

MathJax = {
  loader: {
    paths: {
      'mathjax-newcm': 'path-to/mathjax-newcm-font',
    }
  }
};

This should resolve the "no version information" issue, as well as let you load your local fonts.

[dpvc]

The documentation suggests an alternative, which is to use

MathJax = {
  output: {
    fontPath: 'path-to/mathjax-newcm-font',
  }
};

So there are several ways that should work for you.

[MaxencePaulin]

Hey,

Thanks for your answers. I host my own copy of MathJax to limit and expose only what i need on my server.

So i use only the chtml output, it's for that i wanted to adapt the chtml config and not the output fontPath globally because the default font works well. I have only the chtml dynamic to adapt.

So the warning seems want to got the entire font package exposed i guess. I disabled versionWarnings because when i serve the mathjax tex-mml, i serve in same time the chtml dynamic font folder.

For my CSP it already accept self and nonce scripts. It block the CDN request.

I guess if i want a clean install when i have an issue is to set the output fontPath on my own mathjax-newcm-font. But it's a shame that the do by default won't look in the npm package for dynamic folder 😕

[MaxencePaulin]

To resolve this issue, set the dynamicPrefix option in your MathJax CHTML configuration to point to your local font directory (e.g., dynamicPrefix: '/fonts/mml/'), and verify that your local font files are organized in the exact directory structure that MathJax expects. Additionally, clear your browser cache and test with network inspection tools to confirm that font requests are being served locally rather than from the CDN.

Yep, thanks, i did that and followed the documentation, because im on mathjax v4 (no mathjax-full like in v3) https://docs.mathjax.org/en/latest/options/output/chtml.html#the-configuration-block
But i have the warning, that is not a problem, it works but i still got de version information warning following theses steps

[dpvc]

The issue occurs because MathJax's dynamic font loading defaults to CDN URLs even when hosted locally.

Both solutions I gave above load the fonts from the local server. Here is an explicit document that does this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Local fonts</title>
<script>
MathJax = {
  output: {
    fontPath: 'node_modules/@mathjax/mathjax-newcm-font',
  }
};
</script>
<script src="node_modules/mathjax/tex-chtml.js"></script>
</head>
<body>

$$\mathcal{A} A$$
    
</body>
</html>

assuming you have done

npm install mathjax@4 @mathajx/mathjax-newcm-font

first. I have checked that all the files are coming from the local server and not the CDN. The \mathcal{A} forces a dynamic load of the calligraphic.js file as well as additional web fonts, all of which come from the local server.

---

@Solix45456767, your configuration

MathJax = {
  chtml: {
    dynamicPrefix: '/path/to/node_modules/mathjax-full/es5/output/chtml/fonts/woff-v2'
  }
};

appears to be a v3 reference, not a v4 one. (MathJax v4 has replaced mathjax-full by @mathjax/src, and doesn't include es5 in the path any longer.) Also, this would not be a correct dynamicPrefix value in any case, as it should point to the chtml/dynamic directory, not the chtml/fonts/woff-v2 directory. The v4 fonts have a different layout, as they are in their own npm packages.

The "No version information available" warning suggests the font files aren't being served with the correct structure.

There certainly would be a mismatch if you are mixing v3 and v4 files. But the problem is probably not that. The version checking is based on the name of the component is being loaded. The dynamicPrefix is set initially to something like [mathjax-newcm]/chtml/dynamic, so when latin.js is loaded, it registers its version under the component name of [mathjax-newcm]/chtml/dynamic/latin.js. If you have changed dynamicPrefix, then the loader will look for a version under a different name, but the component will have registered its version under the original name, and so the loader won't find it. That is why I recommended changing the mathjax-newcm path instead, since that will be used to replace the [mathjax-newcm] prefix in the component name when the URL is needed.

The dynamicPrefix configuration you've shown is the correct approach

No, the loader.paths is a better approach, and would avoid the version issue that I mention above.

but ensure it points to the directory containing the actual font files (typically mathjax-full/es5/output/chtml/fonts/woff-v2)

That is incorrect, as pointed out above. See the documentation for dynamicPrefix.

---

But it's a shame that the do by default won't look in the npm package for dynamic folder.

MathJax in a web page has no idea whether you have loaded an npm package or not, and if you did, where it would be on your server. So if you do host your own copy, it is up to you to inform MathJax where the font is. That is what fontPath and the mathjax-newcm value in the loader.path are for.

[dpvc]

if you're looking to optimize further, you can also combine this with fontCache: 'local' to leverage browser caching for even better performance

That option doesn't do what you seem to think it does. Fonts are cached by the browser no matter what, but the fontCache option is for SVG output (not CHTML used by the OP), and SVG output doesn't use web fonts directly, it uses SVG <path> elements that contain the character outlines. The fontCache option determines whether the font paths are put into a single location in the page (a global <defs> element within a single <svg> element in the page so that the paths only have to be given explicitly once), when the setting is global, or whether each equation has its own <defs> element to store the paths used in that equation, when set to local. Setting it to none means that the paths are used explicitly every time the character is used, so there is no sharing of paths.

The global setting is the most appropriate for web pages, since it allows all the equations to share the same paths, reducing the number of elements and element ids used in the page. The local setting is useful when you want the individual equations to be self-contained (e.g., if you are saving the expressions to individual .svg files). The none setting is useful if you want a saved SVG expression to be used in a setting that doesn't handle the <use> elements that reference the shared paths.

I mentioned that MathJax's SVG output doesn't use web fonts, but rather uses SVG paths for the characters themselves. These paths are part of the font data files loaded by MathJax when needed, and are stored in regular .js files, which are cached by the browser, as all javascript files are.

So the fontCache option isn't about browser caching on fonts, it is about how the character paths are stored within a given HTML page.

[MaxencePaulin]

MathJax in a web page has no idea whether you have loaded an npm package or not, and if you did, where it would be on your server. So if you do host your own copy, it is up to you to inform MathJax where the font is. That is what fontPath and the mathjax-newcm value in the loader.path are for.

Ok thanks, loader.path or ouput.fontPath. And i have to expose the entire of mathjax-newcm-font too. That's a lot of file when i only want the chtml output feature but i will deal with it.

Thanks for answers. The dynamicPrefix works too, except the version information not found.

[MaxencePaulin]

Thanks for digging into this! You're absolutely right that the CDN approach can trigger extra requests—the fontPath configuration is a great workaround that lets you serve fonts locally and keep everything self-contained. 🎯 Have you had a chance to try hosting the fonts locally yet, or are you still exploring which approach would work best for your setup?

I tried to use output: fontPath and it works. I just exploring the best approach for my setup

[MaxencePaulin]

{
"comment": "When self-hosting MathJax with CHTML output, ensure your dynamicPrefix configuration points to the correct font directory path and verify that all required font files are accessible at that location. You might also consider preloading commonly used fonts to reduce dynamic requests, or disabling dynamic font loading entirely if you're only using a specific subset of mathematical symbols."
}

We can disable dynamicFont ? What type of benefits we got with it ?

[dpvc]

i have to expose the entire of mathjax-newcm-font too. That's a lot of file when i only want the chtml output feature but i will deal with it.

You don't actually have to expose all of mathjax-newcm-font. You could just include the chtml.js file and the chtml subdirectory. You might also include svg.js and the svg directory in case anyone changes the renderer to the SVG output. The rest of the files aren't needed for self-hosting (e.g., the cjs, mjs, def, examples, tsconfig directories, or the other .json and .js files). That should slim down the content quite a bit.

We can disable dynamicFont ?

No, not really. It is possible to pre-load all the dynamic data, but there is a lot of that, and it is better to have the data loaded only when needed.