Loading web font - chrome.

[natank]

Hello,

While refreshing the browser it echoes message#1 followed, after few seconds, by message#2:

message #1: "Loading web-font Tex/Math/Bolditalic"

message #2: "Can't load web font Tex/Math/Bolditalic"

There is no problem with the page itself except that it displays the mathjax equations with significant delay.

Happens only with Chrome and only with Bolditalic.

Are you familiar with this or have a recommendation to prevent  this message ?

Thanks,

Natan.

[michael...@gmail.com]

I'm having the same issue, except the browser reverts to image fonts after the delay. 

Tested on Chrome and Safari on a Macbook, only Chrome gives a problem. I load mathjax from the CDN using the Tex-AMS_HTML config file:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script> Any help diagnosing would be appreciated. I will provide a link or source for the offending website on request.

Many thanks,

Mike

[Peter Krautzberger]

Hi Nathan, Mike,

Thanks for reporting a problem. Can you please provide more information? In particular, a live sample (either a public page or using something like jsfiddle), browser versions and OS versions are necessary to help track this down -- see the User Group guidelines for more information.

Thanks,

Peter.

--
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/groups/opt_out.

[michael...@gmail.com]

A link to the offending website, as requested.  

Hangs for a few seconds with message

:: Loading web-font Tex/Math/BoldItalic

Then it continues to load until the final message:

:: Web-Fonts not available -- using image fonts instead

The math is then rendered in pixellated images on my browser. 

OS:  OSX 10.6.8

Browser: Chrome Version 32.0.1700.107

I cleared the cache on Chrome, and the problem persisted.

Any other information or logs that could help? Please link to instructions for how to procure the information if its not obvious.

-Mike

[Peter Krautzberger]

Thank, Mike. I see the problem on Chrome 32 but it seems to work fine on Chrome 33. I also don't see the problem if I load MathJax with a different configuration file.

So I'm wondering if this is this extra-weird Chrome bug. 

Can you try loading the TeX-AMS_HTML-full or TeX-AMS-MML_HTMLorMML configurations?

Peter.

[michael...@gmail.com]

I tested both of these config settings; no change. I've left it at TeX-AMS-MML_HTMLorMML for further testing.

-Mike

[Peter Krautzberger]

Thanks again, Mike. Looks like \(\boldsymbol{x}\) is all it takes to trigger this -- I've opened a ticket at https://github.com/mathjax/MathJax/issues/735.

Peter.

[Peter Krautzberger]

PS: @Nathan let us know if you have encountered a different problem.

Peter

[michael...@gmail.com]

>>  \(\boldsymbol{x}\) is all it takes to trigger this

That's the command that invokes the BoldItalic font, I'm fairly sure. The bug may still lie in Chrome, since I noticed it only after a recent update. 

Thanks for your help,

-Mike

[Peter Krautzberger]

> That's the command that invokes the BoldItalic font, I'm fairly sure. 

Yes. What I was trying to say is that that's all it takes (nothing more complex seems to be going on).

Peter.

[Davide P. Cervone]

Thank, Mike. I see the problem on Chrome 32 but it seems to work fine on Chrome 33. I also don't see the problem if I load MathJax with a different configuration file.

So I'm wondering if this is this extra-weird Chrome bug. 

Can you try loading the TeX-AMS_HTML-full or TeX-AMS-MML_HTMLorMML configurations?

It looks like it is a font-detection problem not the memory bug you link to.  I still have version 32, so I'll take a look and see what I can figure out.

Davide

[natank]

Hi,

I see the same behavior as Mike reported when browsing to his link from my PC (Windows 7, Chrome 32).

However, in my website (see this link) I see slightly different behavior - fonts are loaded (rather than images) but as I mentioned before, after a noticeable delay.

Thanks for supporting.

Nathan.

[Peter Krautzberger]

Thanks for the additional information, Nathan.

Peter.

[Murray]

Hi

For the record, my first view of the page (after a very long load time, in Win 7, Chrome 32) resulted in quite unreadable math:

A reload resulted in a "no data" message, after a long delay.

A further reload resulted in image fonts, probably the same as what the others are seeing.

Regards

Murray

[Davide P. Cervone]

I see the same behavior as Mike reported when browsing to his link from my PC (Windows 7, Chrome 32).

However, in my website (see this link) I see slightly different behavior - fonts are loaded (rather than images) but as I mentioned before, after a noticeable delay.

The switch to image fonts only occurs if the FIRST font that MathJax requests is not able to load.  If the first font loads, then the others SHOULD be able to be loaded, and MathJax assumes they will be, so it doesn't switch to image mode in that case if one fails.  The failure of the first font suggests that the fonts aren't installed properly on the server, or that there is a cross-domain access issue (Firefox is particularly picky about that), or some other issue, so MathJax gives up and switches to images.

On your page, bold-italics isn't the first thing to appear, so MathJax loads other fonts first, which are detected, and so when bold-italics fails to be detected, it doesn't switch to images.  In contrast, Mike's page has a bold-italic z as its first math character, so when bold-italics fails to load, that is the first font requested, and MathJax switches to images.

Davide

[Davide P. Cervone]

For the record, my first view of the page (after a very long load time, in Win 7, Chrome 32) resulted in quite unreadable math:

A reload resulted in a "no data" message, after a long delay.

This is due to the fact that page uses a web font as its main page font (Open Sans), and that font isn't available when MathJax first runs and tries to measure the font em- and ex-sizes.  It turns out that Chrome can report ex and em sizes of 0 in this case, and that throws MathJax off completely in its spacing.  This is described in more detail in

https://github.com/mathjax/MathJax/issues/576

One solution is to use MathJax's MatchWebFonts extension, which looks for changes to the em and ex sizes, and re-typesets the math when one occurs.  That means that when the page font arrives, MathJax will redraw the math using the correct em- and ex-sizes.  Reloading the page also usually takes care of the problem (since the font will now be in cache, and be available when MathJax first runs).

Davide

[Davide P. Cervone]

> While refreshing the browser it echoes message#1 followed, after few seconds, by message#2:
>
> message #1: "Loading web-font Tex/Math/Bolditalic"
> message #2: "Can't load web font Tex/Math/Bolditalic"
>
> There is no problem with the page itself except that it displays the mathjax equations with significant delay.
>
> Happens only with Chrome and only with Bolditalic.
>
> Are you familiar with this or have a recommendation to prevent this message ?

The problem appears to be a bug in Chrome 32.

When a bold or italic font is requested, if that weight or style is not available, the browser may generate the bold or italic version algorithmically from the normal version of the font. In the case of a web font, that may be replaced by the actual font when it arrives. But the sizes of the characters in the actual bold or italic version of the font may not correspond to the algorithmic one, so MathJax needs to be able to recognize the difference between the faked font and the real one.

To to this, MathJax's web fonts include special characters that allow MathJax to recognize the true bold or italic font as different from one generated algorithmically from the standard font. It uses these to wait for the real font to arrive rather than trying to use the algorithmic one.

What seems to be happening in Chrome 32 is this: MathJax requests the MathJax_Math-bold-italic, but Chrome uses MathJax_Math-italic to construct a bold form that is uses instead. MathJax recognizes that this is not the correct font and waits for the true one to arrive. What is supposed to happen is that the browser goes on to load the true font while MathJax is waiting, and then MathJax will detect it when it does. But what actually seems to happen is that Chrome doesn't make the font available until MathJax has given up waiting for it. MathJax waits for 15 seconds for the font, and then gives up. I can see that the font hasn't changed during those 15 seconds, and as soon as MathJax times out, the font is replaced, so something is wrong about Chrome's handling of the font or the screen refresh, or something related to that.

They seem to have resolved the problem in Chrome 33, according to Peter (I haven't upgraded to see).

Some browsers have trouble with @font-face rules involving bold and italic, and so MathJax has a feature that causes it to load each font as a separate family (rather than trying to use style and weight on a single family). Using this will allow Chrome 32 to load the bold-italic font. So if you add

<script type="text/x-mathjax-config">
if (MathJax.Hub.Browser.isChrome && MathJax.Hub.Browser.version.substr(0,3) == "32.") {
MathJax.Hub.Register.LoadHook(
"[MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js",
function () {MathJax.OutputJax["HTML-CSS"].FontFaceBug = true}
);
}
</script>

that will enable that feature when Chrome 32 is used. That should clear up the issue for you.

Davide

[natank]

Hi David, 

Is there anything to do to eliminate the delay caused due to the "bold-italic" font ?

Thanks,

Nathan

[Peter Krautzberger]

Nathan,

Please check the issue tracker for an on-the-fly fix -- https://github.com/mathjax/MathJax/issues/735#issuecomment-34878868

Peter.

[Davide P. Cervone]

Add the script that I gave in my message to your page (BEFORE the script that loads MathJax.js), and it should clear up both the delay and the switch to images.

Davide

[michael...@gmail.com]

Hi David,

I added your code snippet, and there are now problems loading other fonts.  I get a delay on italic and bold (but not bold-italic). It doesn't load the usual bold font, and it takes quite some time to load the page.  I'll leave the snippet up so that you can test. 

Thanks for your help. 

-Mike

[Peter Krautzberger]

I can confirm Mike's issue. The log (below) indicates Math/Italic and Main/Bold as culprits.

Peter.

Loading [MathJax]/config/TeX-AMS-MML_HTMLorMML.js Loading [MathJax]/extensions/TeX/newcommand.js Loading [MathJax]/extensions/TeX/boldsymbol.js Loading [MathJax]/jax/output/HTML-CSS/jax.js Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/Math/BoldItalic/Main.js Loading web-font TeX/Math/BoldItalic Loading web-font TeX/Main/Regular Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/AMS/Regular/Main.js Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/AMS/Regular/BBBold.js Loading web-font TeX/AMS/Regular Loading web-font TeX/Math/Italic Can't load web font TeX/Math/Italic Loading [MathJax]/jax/output/HTML-CSS/autoload/mtable.js Loading web-font TeX/Size1/Regular Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/Main/Italic/LetterlikeSymbols.js Loading web-font TeX/Main/Bold Can't load web font TeX/Main/Bold"

[Davide P. Cervone]

Sorry, the code was being inserted too late (after a couple of fonts had already been started).  Try 

<script type="text/x-mathjax-config">

if (MathJax.Hub.Browser.isChrome && MathJax.Hub.Browser.version.substr(0,3) === "32.") {

  MathJax.Hub.Register.StartupHook(

    "HTML-CSS Jax Config",

    function () {MathJax.OutputJax["HTML-CSS"].FontFaceBug = true}

  );

}

</script>

instead.

Davide

[michael...@gmail.com]

Works like a charm.  Thanks for the help!

Does this also fix the size issue when the webfonts aren't cached? (See Murray's screenshot above.) I cleared my cache and it worked just fine, but I don't know if others will see the same error.

-Mike

[michael...@gmail.com]

Let me quote David, since this final fix didn't post to the thread:

Davide P. Cervone said:

> Works like a charm.  Thanks for the help!

Glad it worked for you.

> Does this also fix the size issue when the webfonts aren't cached? (See Murray's screenshot above.)

No, that is a separate issue, and the MatchWebFonts extension handles that.  So you could change the script to

        <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          extensions: ["MatchWebFonts.js"]
        });

        if (MathJax.Hub.Browser.isChrome && MathJax.Hub.Browser.version.substr(0,3) === "32.") {
          MathJax.Hub.Register.StartupHook(
            "HTML-CSS Jax Config",
            function () {MathJax.OutputJax["HTML-CSS"].FontFaceBug = true}
          );
        }
        </script>

to include that.  (If you have other MathJax.Hub.Config calls that include the extensions array, then combine them, as otherwise one will overwrite the other.)