How do I get font sizes to match when using Google Fonts?

[Christian Lawson-Perfect]

I've got a page which uses a font loaded from Google Fonts for paragraph text. MathJax seems to have some trouble working out the size of the text - in my example, the font-size used the HTML-CSS output is exactly half that of the surrounding text. The SVG output looks even smaller still. 

I've put together a minimal example at http://codepen.io/christianp/pen/dXqRLy. I've put in a delay so MathJax definitely runs after the fonts have been loaded, and loading MatchWebFonts.js doesn't seem to help. 

[Davide Cervone]

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.

Davide

On Aug 2, 2016, at 11:05 AM, Christian Lawson-Perfect <christia...@gmail.com> wrote:

I've got a page which uses a font loaded from Google Fonts for paragraph text. MathJax seems to have some trouble working out the size of the text - in my example, the font-size used the HTML-CSS output is exactly half that of the surrounding text. The SVG output looks even smaller still. 

I've put together a minimal example at http://codepen.io/christianp/pen/dXqRLy. I've put in a delay so MathJax definitely runs after the fonts have been loaded, and loading MatchWebFonts.js doesn't seem to help. 

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Christian Lawson-Perfect]

Turning off matchFontHeight is good enough for the current problem, thanks.

Would it be possible to write an extension which sets the scale to a fixed value for certain fonts?

[Peter Krautzberger]

> Would it be possible to write an extension which sets the scale to a fixed value for certain fonts?

I don't think there's a way to detect which font is actually being used. The best seems to be to use getComputedStyle to look up the font-famiily and guess it from there. 

Then you still have to decide which scale to apply to MathJax. I guess you could measure an actual x of the font in a canvas element, in which case you won't need to guess the font, I suppose.

Not really great either way :-(

Best,

Peter.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.