MathJax: expressions are sized incorrectly when using certain Google fonts

I am trying to create an HTML file with some math in it that will get rendered using MathJax. However, the math expressions are sized wrongly when using a google font (in my case, Lusitana). They appear correctly when using a normal font that is installed on the computer or some other Google fonts. I would really like to use Lusitana - is there any way to get this to work?

Edit 1: My platform is Ubuntu 16.04, Chrome 62. The problem doesn't happen on Firefox.

Here is how the rendering of the source below looks with the font Lusitana: https://i.sstatic.net/M5bML.jpg

The HTML source that produces the problem is:

<html>
<head>
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Lato'); 
 @import url('https://fonts.googleapis.com/css?family=Lusitana'); 

body {
    font-family: "Lusitana", Garamond, Baskerville, "Times New Roman", serif;
    /* font-family: "Open Sans", Garamond, Baskerville, "Times New Roman", serif; */
}

p {
    font-size: 20px;
}
        </style>
        <script type="text/javascript">
window.MathJax = {
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        processEscapes: true
    },
};
        </script>
        <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
        </script>
    </head>
    <body>
        <p>
        The roots of a quadratic equation, $ax^2 + bx + c = 0$ are given by, $$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ The expression $\sqrt{b^2 - 4ac}$ is called the discriminant of the equation. If its value is $0$, then the roots are equal, otherwise the roots are distinct. Furthermore, if the discriminant is positive, the roots are real, and if negative, the roots are complex.
        </p>
    </body>
</html>

Solution

This is due to Lusitana having bad metadata.

From [this posting](This might help: https://groups.google.com/d/msg/mathjax-users/v3W-daBz87k/xjxFFdfQBQAJ):

MathJax determines the scaling factor by trying to match the ex-height of the MathJax fonts to the ex-height of the surrounding font. That only works if the surrounding font has the ex-height properly set. Not all free fonts, and in particular, not all Google web fonts, have proper ex-heights. It appears that “Crimson Text” is one such font. To see this, add
<span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span>
into the paragraph formatted with Crimson Text (you can even remove MathJax entirely to verify that it doesn’t have anything to do with MathJax). You should see a very small red box next to the text (when it should be as tall as an “x” in the font).

So MathJax tries to scale its fonts so that the “x” is as high as the red box. But MathJax has a configuration parameter that limits how small a scale it will use, and that is at 50%, so that is why you see the font at exactly half the original size.

One possible solution is to tell MathJax not to try to match the surrounding font. You do that by setting matchFontHeight:false in the configuration for the various output renderers:

MathJax.Hub.Config({
  "HTML-CSS": {matchFontHeight: false},
  SVG: {matchFontHeight: false},
  CommonHTML: {matchFontHeight: false}
});

This will keep the font from getting tiny, but may mean the math doesn’t match the font height of the rest of the text as well as it might. Alternatively, you could change the minimum font scale to be something like 95% (or whatever works):

MathJax.Hub.Config({
  "HTML-CSS": {minScaleAdjust: 95},
  SVG: {minScaleAdjust: 95},
  CommonHTML: {minScaleAdjust: 95}
});

See if one of those doesn’t do the trick.

Test.

 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Lato'); 
 @import url('https://fonts.googleapis.com/css?family=Lusitana'); 

.lusitana {
    font-family: "Lusitana", Garamond, Baskerville, "Times New Roman", serif;
}
.opensans {
    font-family: "Open Sans", Garamond, Baskerville, "Times New Roman", serif; 
}

p {
    font-size: 20px;
}

	<p class="lusitana">Lusitana: <span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span></p>
  <p class="opensans">OpenSans: <span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span></p>