So I downloaded a MathJax package, unpacked it, modified the settings and uploaded the files to an http domain. Everything worked as well as possible for more than a year.
Two days ago, I copied all files (including the database) to a new domain, activated SSL and modified .htaccess to translate all addresses into https. This works perfectly for everything except MathJax "Can't load web font" resulting in a 10 second delay every time it attempts to draw expressions.
Neither Firefox nor Chrome show any kind of errors in the console or failed file reads (cache off, 200 OK). The only effect in the browsers is that there is a 9-10 second gap between /mathjax/jax/output/HTML-CSS/fonts/STIX-Web/Main/Regular/Main.js and /mathjax/jax/output/HTML-CSS/fonts/STIX-Web/Main/Italic/Main.js.
Approximate timeline …
Log (last 4 lines) …
In the timeline, the seconds are the timestamps of the attempts, not the durations. Those are 0-100 ms each.
What I have tried: Reset .htaccess, loaded everything with http, recopied all MathJax files from old domain to the new one and made sure all directories and files have the proper permissions. I have also entered the paths (in the address bar) to the failing woff files and they download properly. Furthermore, I have disabled SSL and modified the script tags to read the settings file and MathJax from the old domain – still a 10 second delay before attempting to read font files.
How can I tell why MathJax can't load a web font? Why does MathJax, with identical code, add a delay on one site but not the other? Is there a way to troubleshoot this?
Update:
This is now really weird!! After cross-loading files between the sites, I have narrowed down the error to be connected to my CSS file!… which passes validation perfectly (and contains no font changes, between sites, at all). The main change I've done in that file is to add wrapping divs to most elements directly inside body in order to style the wrappers at 100% width, but have the content at 80%.
It turns out that MathJax (2.6.0 and 2.7.2) failed to load a font because I set a min-width on #MathJax_Font_Test. I did not do this on purpose and had no idea it would break. Here's my fix:
body > div > div:not(#MathJax_Font_Test) {
min-width: 960px;
}