Question 257343 in CSS Question posted in
Some basic documentation can be found here.

Css – different font for MathJax output

I’m trying to display some math equations via MathJax in my Vue3 project.

It renders, but I want the font to look more Mathematical®.

Here’s my output:

enter image description here

Here’s what ChatGPT spit out:

enter image description here

I tried changing the font-face of the containing div to serif, but that didn’t work, since it already is serif.

Any suggestions would be helpful.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Apparently, the issue was that the font that MathJax provided wasn't being loaded because I copied the package from the /node_modules directory to my /src/assets folder (as instructed by one of the npm packages.

    After just resigning to using the CDN, the font loaded correctly.


  2. 0

    First, make sure you’re not making MathJax generate MathML. Use the HTML+CSS or SVG render options, both of which look much better. For instance, with a plain MathJax 2.7 config that renders using HTML+CSS, the formula

    x = frac{-b pm sqrt{ b^2 - 4ac}}{2a}

    renders as:

    enter image description here

    Which looks drastically better than what you’re showing.

    If that doesn’t fix things, and you’re using MathJax v3, then one problem is that you only get one choice in font as per the font support docs, so you might want to downgrade to 2.x since that gives you far more options.

    Or as a different approach, you can try KaTeX, which gives less control, but the default KaTeX font is pretty decent:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search