How can I use MathJax font "Gyre-Pagella" and "Computer Modern Bright"?

It' not working :(

I don't know anything about web develop...

Referring to the contents of this website, I wrote it as follows.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    availableFonts: [],
    preferredFonts: null,
    webFont: "Gyre-Pagella",
    imageFont: null,
    undefinedFamily: "'Arial Unicode MS', cmbright”
  }
});
</script>
<script> MathJax = { tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]} }; </script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Plz someone help me!

Solution

You are mixing v2 configuration with v3 of MathJax. MathJax v3 has a different API, so the MathJax.Hub approach is no longer available. (See the conversion documentation for details, and in particular, the configuration converter that can map your old configuration to the new format).

Unfortunately, version 3 currently only supports the MathJax TeX font, so Gyre-Pagella is not yet available. Phase II of the v3 conversion involves porting the other web fonts to v3, including STIX2, and the web fonts from v2. It will make the font toolchain available so that others can convert their own fonts as well. That work is currently underway, and should be made available this summer. But for now, with v3, you will have to stick with the MathJax TeX fonts.

Note that the site you link to is the v2.7 documentation. Use the green version menu near the bottom left to switch to v3.1 to get the documentation for the version of MathJax you are actually loading.

Alternatively, you can switch back to version 2.7.9 of MathJax.

To use Gyre-Pagella in v2, use

  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    "HTML-CSS": {
      fonts: ["Gyre-Pagella"],
      imageFont: null,
      undefinedFamily: "'Arial Unicode MS', cmbright"
    },
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_HTML"></script>

This uses the short-hand fonts option to set all the font parameters properly.