Hosting MathJax Image Fonts Elsewhere

Written by Josh on April 04, 2016

This website uses MathJax to format math syntax. It parses \LaTeX code and outputs a mess1 of CSS code that positions the characters and symbols correctly. Most of the time, it uses web fonts. However, the fallback is an image font where every character of the font is an individual PNG file. This works out to about 30,000 individual files, all to support ancient browsers. I attempted to host these files myself, but they nearly broke git-ftp, which I use to upload files to the server automatically.

My solution to this was to host all of the MathJax files except for the image fonts myself, then redirect the image directory to the MathJax CDN. This is a very simple line in my .htaccess file:

RewriteRule ^bower/MathJax/fonts/HTML-CSS/TeX/png/(.*)$ http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/png/$1 [R=301,NC,L]

It seems to work, and frankly, outdated browsers are not a big concern on a website that gets essentially no page views.


Footnote

The relatively simple fraction below takes up over 7,800 characters of HTML and CSS, despite being written with just 36 characters of \LaTeX:

m_a = \frac{\sqrt{2b^2+2c^2-a^2}}{2}

However, it will look the same on nearly every platform, and looks far better than any text equivalent could.

Copyright © 2014-2016 Joshua Oldenburg