Replace the Fraktur font in MathJax

I’m looking to modify the font used by the \mathfrak command in math mode (using MathJax extension)

So far, I’ve tried to look into and understand how I could directly change the font within MathJax’s source files (see the link below)
https://github.com/mathjax/MathJax-src/blob/master/ts/output/chtml/fonts/tex-woff-v2/MathJax_Fraktur-Regular.woff
However, I haven’t been able to draw any useful conclusions.

I’ve tried several things (with the help of ChatGPT), but none of them worked. At one point, I encountered this error message, although I imagine it doesn’t help much in understanding the issue:
File failed to load: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/extensions/TeX/font-mathjax.js

That said, would it be possible to suggest solutions that allow me to change the font rendered by the \mathfrak command in math mode ?

Here is a summary of my goal in the following snippet

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.cdnfonts.com/css/latin-modern-roman?styles=545,547,551,553,544,546,550,549,548,543,542,552" rel="stylesheet">
    <link href="https://db.onlinewebfonts.com/c/50a215f3bc37263edc9265072a4022d8?family=Fraktur" rel="stylesheet">
    <style>
        * {
            font-family: 'LMRoman10';
        }
        kbd {
            background-color: #DDDDDD;
            font-family: monospace;
            font-weight: 200;
            color: black;
            padding: 2px 4px;
            text-align: center;
            border-radius: 2px;
        }
    </style>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            "HTML-CSS": {
                preferredFont: "TeX",
                availableFonts: ["STIX", "TeX"],
                linebreaks: { automatic: true },
                EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
            },
            tex2jax: {
                inlineMath: [["$", "$"], ["\\(", "\\)"]],
                displayMath: [["$$", "$$"], ["\\[", "\\]"]],
                processEscapes: true,
                ignoreClass: "tex2jax_ignore|dno"
            },
            TeX: {
                extensions: ["begingroup.js"],
                noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } },
                Macros: { href: "{}" },
            },
            messageStyle: "none"
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML-full"></script>
</head>
<body>
<body>
    <h1>Customizing <kbd>\mathfrak</kbd> in MathJax</h1>

    <h2>The normal and default result</h2>
    By default, the font used by the <kbd>\mathfrak</kbd> command looks like this<br>
    $\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ~~abcdefghijklmnopqrstuvwxyz~~0123456789}$

    <h2>The expected result</h2>
    However, I want to change the font for <kbd>\mathfrak</kbd> to this one<br>
    <span style="font-family:Fraktur;font-weight:600">ABCDEFGHIJKLMNOPQRSTUVWXYZ  abcdefghijklmnopqrstuvwxyz  0123456789</span>

    <h2>Example: Writing a mathematical expression</h2>
    For example, I want to write this
    \[z = \mathfrak{Re}(z) + i\mathfrak{Im}(z)\]
    Where $\mathfrak{Re}$ and $\mathfrak{Im}$ should render to something like this <span style="font-family:Fraktur;font-weight:600;">Re Im</span>
</body>
</html>
</body>

Solution

It looks like you using Latin Modern as the text font for the page. Perhaps you should use MathJax's Latin Modern font as well? Its Fraktur version is closer to what you are looking for. Your current font arrangement allows for either STIX or MathJax's TeX font to be used, depending on what is installed on your user's computer. I have the STIX fonts installed, so I get their Fraktur, which is almost identical to what you are asking for, but you may be getting the MathJax TeX fonts, which are noticeably different. You don't give an actual screen shot to show what you are getting, so it is hard to tell.

In any case, if you remove the preferredFont and availableFonts options in the "HTML-CSS" block of your MathJax configuration and replace them with fonts: ['Latin-Modern'], you may find the results more to your liking.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.cdnfonts.com/css/latin-modern-roman?styles=545,547,551,553,544,546,550,549,548,543,542,552" rel="stylesheet">
    <link href="https://db.onlinewebfonts.com/c/50a215f3bc37263edc9265072a4022d8?family=Fraktur" rel="stylesheet">
    <style>
        * {
            font-family: 'LMRoman10';
        }
        kbd {
            background-color: #DDDDDD;
            font-family: monospace;
            font-weight: 200;
            color: black;
            padding: 2px 4px;
            text-align: center;
            border-radius: 2px;
        }
    </style>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            "HTML-CSS": {
                fonts: ["Latin-Modern"],
                linebreaks: { automatic: true },
                EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
            },
            tex2jax: {
                inlineMath: [["$", "$"], ["\\(", "\\)"]],
                displayMath: [["$$", "$$"], ["\\[", "\\]"]],
                processEscapes: true,
                ignoreClass: "tex2jax_ignore|dno"
            },
            TeX: {
                extensions: ["begingroup.js"],
                noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } },
                Macros: { href: "{}" },
            },
            messageStyle: "none"
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS_HTML-full"></script>
</head>
<body>
<body>
    <h1>Customizing <kbd>\mathfrak</kbd> in MathJax</h1>

    <h2>The Latin Modern result</h2>
    By default, the latin-Modern font used by the <kbd>\mathfrak</kbd> command looks like this<br>
    $\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ~~abcdefghijklmnopqrstuvwxyz~~0123456789}$

    <h2>The expected result</h2>
    However, I want to change the font for <kbd>\mathfrak</kbd> to this one<br>
    <span style="font-family:Fraktur;font-weight:600">ABCDEFGHIJKLMNOPQRSTUVWXYZ  abcdefghijklmnopqrstuvwxyz  0123456789</span>

    <h2>Example: Writing a mathematical expression</h2>
    For example, I want to write this
    \[z = \mathfrak{Re}(z) + i\mathfrak{Im}(z)\]
    Where $\mathfrak{Re}$ and $\mathfrak{Im}$ should render to something like this <span style="font-family:Fraktur;font-weight:600;">Re Im</span>
</body>
</html>
</body>

I note that the I and J in the Fraktur font that you are comparing to are indistinguishable (at least to me). That seems a bit odd. But perhaps the Latin Modern version will be close enough to what you want.

In addition to teh font change, I also changed the version of MathJax being used to 2.7.9, which is the highest v2 version rather than the older 2.7.5 that you had been using.

As for using the exact font you are loading from onlinewebfonts.com, it would take s=considerable effort to make that possible. I doubt ChatGPT will be able to accomplish it. MathJax needs quite a bit of information about the fonts that it uses (including bounding box information about every glyph that is available), and so you would need to provide that information, in the proper form, for the font you are looking to use. That is not impossible, but it is non-trivial, and is more than just changing some CSS, for example.