Using MathJax fonts via @font face
From https://groups.google.com/d/msg/mathjax-users/jqQxrmeG48o/n_E2KvqxJWIJ
Well, the easiest way to get it is to use TeX for the math rather than hand coding the entities. This would make sure that it matches the MathJax since it will actually be produced by MathJax. It will also make the distinction between math and text more clear within your document.
If you feel you must use the entities, then it is possible to get them to appear in the MathJax fonts, but it will take some effort, and you will have to add some HTML, so the document will have to be modified. There are a number of issues to contend with, which MathJax normally takes care of for you.
First, you need to set up some styles that access the MathJax web fonts. Note that these are NOT the STIX fonts (which are only used if your reader has them installed locally on their computer). The CSS I provide below uses the web-based MathJax fonts, so you want to be sure that MathJax also uses them, not the STIX fonts, so you should configure your copy of MathJax accordingly (see the example below).
Second, the lower-case Greek letters and the italic letters used for variables are stored in the MathJax_Math-Italic font, while the upper-case Greek are in MathJax_Main-Regular (since they are not italic). So you need two font families for this. I have set these two up below. There are actually 26 different fonts used by MathJax, so if you need characters out of any of the others, you will need to set up additional CSS @font-face rules for that.
Third, MathJax scales its output so that the ex-height of the MathJax fonts matches that of the surrounding text. This is done dynamically, and a fixed value may not be correct in all parts of your document, and the same value may not work in all browsers (depending on the font in use for the text of your page, the zoom level of the browser, and other factors). I have set the font-size to what works for me, but this may not be correct for you, or for other readers. And what is correct for you may not be for me. This one reason why it is better to have MathJax lay out the math that doing it by hand.
Fourth, because the MathJax fonts are scaled up, that would cause the lines containing math to be taller than usual, so I have set line-height to a smaller value for the MathJax fonts. This again would be dynamically handled by MathJax (which would clip the math to the proper size -- we aren't doing that here).
Finally, you need to mark the mathematics within your document with SPAN's that invoke the MathJax fonts that we have set up. See the example. Since this is much more typing than adding the \(...\), I don't see why this approach would be preferred, but you can do it if you want to. Note that you have to know which font (italic or regular) to use, and if you had several characters on one expression, you might need to switch between them.
If you want to use the MathJax_Main font for the text of the document (not just the math) you can do that, but since the Greek and variable names are in the MathJax_Math-Italic font, you will still need to use SPAN's to switch from text to math, so I doubt that helps much.
In any case, this example does what you ask:
<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {availableFonts: ["TeX"]}
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
<style>
@font-face {
font-family: 'MJX_Math';
src: url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot'); /* IE9 Compat Modes */
src: url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot?iefix') format('eot'),
url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff') format('woff'),
url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf') format('opentype'),
url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/svg/MathJax_Math-Italic.svg#MathJax_Math-Italic') format('svg');
}
@font-face {
font-family: 'MJX_Main';
src: url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot'); /* IE9 Compat Modes */
src: url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot?iefix') format('eot'),
url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff') format('woff'),
url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf') format('opentype'),
url('http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/svg/MathJax_Main-Regular.svg#MathJax_Main-Regular') format('svg');
}
.mjxi {
font-family: MJX_Math;
font-size: 131%;
line-height: .8em;
}
.mjx {
font-family: MJX_Main;
font-size: 131%;
line-height: .8em;
}
</style>
</head>
<body>
<h2>An Identity of Ramanujan</h2>
<p>This is TeX \(\pi \phi \Phi \Pi\) <br>
html character <span class="mjxi">π</span>
and <span class="mjxi">ϕ</span>
capital <span class="mjx">Φ</span>
and <span class="mjx">Π</span></p>
<p>\[
\frac{1}{\bigl(\sqrt{\phi \sqrt{5}}-\phi\bigr) e^{\frac25 \pi}}
\]</p>
</body>
</html>
Again, I think the easiest approach is to actually have MathJax handle the greek letters for you, but it is up to you.