Color in MathJax

Question

I want to display questions on my blog in red in color and answers in blue in color. In questions and answers I am using MathJax 2 to render MathML. I am controlling the coloring of MathJax using CSS like this.

h3, h2, h4, h5
{
    text-align: left;
    font-weight: bold;
    font-family: Verdana;
}

.question
{
    text-align: left;
    color: Red;

}

.centerit
{
    color: Blue;
    text-align: center;
}

that works perfectly fine in IE, but in Firefox it always displays the MathJax in black color. Is there any workaround to resolve this issue?.

Answer 1

If you are testing your site locally using a file:// URL, then Firefox's same-origin policy probably is forcing MathJax to use image fonts rather than web fonts. See the MathJax FAQ entry on this, in particular the section on Firefox local @font-face. One solution is to install the MathJax fonts locally on your computer where you are doing the testing. The fonts can be obtained from the MathJax GitHub repository (click on a font and then on the "Raw" button in the upper right).

Alternatively, you can simply ignore the black color during debugging, as it will work properly once transfered to a live website.