Mathjax: the bold + italic font makes the web page uglier

[DibasDauliya]

I have tons of mathjax equation in my web page. Some texts are of html text and some are mathjax equation.

These fonts are not matching to each other which is making web page mix mix type.

I searched about it and I got to know mathjax only offers few fonts in its documentation page. If I convert the whole text in mathjax text then it would take more time to load and also I don't like the bold/italics/more size type font that mathjax offers.

Please forgive me, If I'm asking this question in the wrong platform . But I really want its solution and no one is helping me in this. I want your help.

The below image is when mathjax is being loaded (I want this state).

And this is when mathjax is completely loaded:

I want the font/font style of the above image(1st image). Is that possible?

This is the code that I'm using:
This is mathjax init code:

<script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          tex2jax: {inlineMath: [['$','$']]},
          "HTML-CSS": { linebreaks: { automatic: true } },
          CommonHTML: { linebreaks: { automatic: true } },
          SVG: { linebreaks: { automatic: true } }
        });
        </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML-full"></script>

This is code that I showed in above picture:

<li class="ans">Solution, <br>
                $\begin{aligned}
                Given, 
                f(x) & = 3x \\
                g(x) & = x + 2 \\
                fog(x) &= 18 \\
                \end{aligned}$ <br>
                To find: x = ?, <br>
                Now, <br>
                $\begin{aligned}
                \text{fog(x)} & = 18 \\
                \text{or, f(x + 2)} & = 18 \\
                \text{or, 3(x + 2)} & = 18 \\
                \text{or, x + 2} & = 6 \\
                \therefore \text{x} & = 4 \\
                \end{aligned}$
                </li>

[dpvc]

You are not consistent in your use of math and text, and that is part of the issue you are facing. For example, the "Given," should be in \text{...} so that it is upright text (math italics is not designed to be used for words, even italicized words). On the other, hand f(x+2) should be in math mode, not \text{}. Straightening out those issues will help a lot.

Then, if you want to use the surrounding text font for the \text elements, you can set the mtextFontInherit property if the output jax to true. This will use the body text font for any text{} content within the math.

Here is the configuration:

  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$']]},
    "HTML-CSS": { linebreaks: { automatic: true }, mtextFontInherit: true },
    CommonHTML: { linebreaks: { automatic: true }, mtextFontInherit: true },
    SVG: { linebreaks: { automatic: true }, mtextFontInherit: true }
  });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS_CHTML-full"></script>

(note that I switched to CommonHTML rather than the older and slower HTML-CSS output jax). Then the text of the page would include

<ol>
  <li class="ans">
  Solution: <br>
  $\begin{aligned}
  \text{Given }
  f(x) & = 3x, \\
  g(x) & = x + 2, \\
  (f\circ g)(x) &= 18. \\
  \end{aligned}$ <br><br>
  To find: $x = {}$?. <br><br>
  Now <br>
  $\begin{aligned}
  (f\circ g)(x) & = 18 \\
  \text{or, } f(x + 2) & = 18 \\
  \text{or, } 3(x + 2) & = 18 \\
  \text{or, } x + 2 & = 6 \\
  \therefore x & = 4. \\
  \end{aligned}$
  </li>
</ol>

[dpvc]

Here is the result of the code above:

[DibasDauliya]

@dpvc Thank you so much. :)
If I have other questions in future, can I ask the question in this same page? or, I should make another new issue?

[DibasDauliya]

@dpvc And, Isn't there any technique to include html tag inside mathjax? I want to make the text 'A' round inside mathjax as of the figure.

This is the code

<li class="ans">Solution, <br>
                $\begin{aligned}
                \text{Given,} 
                \text{f(x)} & = \text{3x + b} \\
                \text{ff(2)} & = \text{12}\\
                \end{aligned}$ <br>
                To find: b = ?, <br>
                Now, <br>
                f(x) = 3x + b <br>
                f(2) = 6 + b  ---- <span class="round">a</span> <br> Again, <br>
                $\begin{aligned}
                \text{ff(2)} & = \text{12} \\
                <!-- \text{or, f(6 + b)} & = \text{12 [from <span class="round">a</span>]} \\ -->
                \text{or, f(6 + b)} & = \text{12 [from (A)]} \\
                \text{or, x + 2} & = \text{6} \\
                \therefore \text{x} & = \text{4} \\
                \end{aligned}$
                </li>

---

And, what would be your suggestion in this? I want to display x² as of other font but I cannot wrap it in text as it uses "x^2".

<li class="ans">Solution, <br>
                $\begin{aligned}
                \text{Given, } 
                \text{f(x)} & = \text{2x - 3} \\
                \text{g(x)} & = x^2\text{ + 1} \\
                \end{aligned}$ <br>
</li>

---

On the other, hand f(x+2) should be in math mode, not text{}.

I don't know is it good or bad practice to include them in text{} and (though "o" and \circ is different I used it as "o") but I feel bit cleaner including them in text{} as it matches the other text's style. so..

---

Also, another problem is about this default line height as of below picture:

removing, text{} fix that as of below picture but there is not space between "-(subtraction sign)"

I searched about it and got to know about \smash{} and it solved the problem. Isn't there any method to apply it directly in config. section?
I again searched about that and find matchFontHeight: true /matchFontHeight: false and I use it in the config. and removed \smash{} but It didn't worked.

Also, _Though I wrapped with \smash{} the margin bottom to the top element of fraction and margin-top to the bottom element of fraction still remains, but if we remove \text{} there is no margin top and bottom, can we remove those margin?_

---

Please don't get angry. I want your help and suggestions. 😅

[DibasDauliya]

@dpvc ??? :(

[DibasDauliya]

@dpvc help me please