How do I change MathJax font Obsidian uses?

[mr-raven]

What I’m trying to do

I am trying to change the font Obsidian uses for MathJax to use Neo Euler. As far as I understand after looking up stuff, this font comes bundled with MathJax since version 2.

Things I have tried

I have tried to make a css snippet for changing the font that I found on various threads across this forum and reddit.

Two of them are:

mjx-math .TEX-I {
  font-family: 'MJXZERO' !important;
}

and

.MJX-TEX,
.MJX-TEX * {
	font-family: "Arial.ttf" !important;
}
.mjx-i {
	font-style: italic !important;
}

But I can’t figure out how to change it to Neo Euler. After looking around, as far as I understood, changing the font through css for MathJax causes issues with spacing and other formatting. But I don’t understand how to change the font without css.

[ariehen]

Is the font you are referring to installed on your device?

Obsidian’s CSS can’t refer to local files. So the font needs to be installed on the device or encoded as base64 in the .css file itself.

About themes, but applies here as well:

Embed fonts and images in your theme - Developer Documentation

---

Once that’s sorted out, we can check the css.

[mr-raven]

Yes, I have the font installed on my device.

[ariehen]

I installed Neo Euler on my device (macOS), closed-opened the vault for good measure, and this is working on my end (for example):

mjx-math .TEX-I {
    font-family: 'Neo Euler';
}

.mjx-i {
    font-style: italic;
}

I’m not too familiar with using CSS to adjust MathJax, but as you can see there’s a whole lot you can target. (apologies for the flashy gif)

I suggest taking a look using the Inspector to find exactly what you want to change:

Obsidian CSS Inspector Workflow

Obsidian CSS Inspector Workflow This was originally called “Obsidian CSS Quick Guide” but it ended up being more focused on the inspector. As a retrospective change to help people use this as a resource, it has been renamed. – FireIsGood Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. …

[mr-raven]

I took a look using the CSS inspector. For a more comprehensive font change, all of these need to be changed.

mjx-math .MJX-TEX {
	font-family: "Euler Math";
}
mjx-math .TEX-B {
	font-family: "Euler Math";
}
mjx-math .TEX-I {
	font-family: "Euler Math";
}
mjx-math .TEX-MI {
	font-family: "Euler Math";
}
mjx-math .TEX-BI {
	font-family: "Euler Math";
}
mjx-math .TEX-S1 {
	font-family: "Euler Math";
}
mjx-math .TEX-S2 {
	font-family: "Euler Math";
}
mjx-math .TEX-S3 {
	font-family: "Euler Math";
}
mjx-math .TEX-S4 {
	font-family: "Euler Math";
}
mjx-math .TEX-A {
	font-family: "Euler Math";
}
mjx-math .TEX-C {
	font-family: "Euler Math";
}
mjx-math .TEX-CB {
	font-family: "Euler Math";
}
mjx-math .TEX-FR {
	font-family: "Euler Math";
}
mjx-math .TEX-FRB {
	font-family: "Euler Math";
}
mjx-math .TEX-SS {
	font-family: "Euler Math";
}
mjx-math .TEX-SSB {
	font-family: "Euler Math";
}
mjx-math .TEX-SSI {
	font-family: "Euler Math";
}
mjx-math .TEX-SC {
	font-family: "Euler Math";
}
mjx-math .TEX-T {
	font-family: "Euler Math";
}
mjx-math .TEX-V {
	font-family: "Euler Math";
}
mjx-math .TEX-VB {
	font-family: "Euler Math";
}

However, changing all the fonts to Euler Math does not work all that well.

Euler Math has all the following available.

Replacing all the font families with Euler Math produces this.

[mr-raven]

By default, each of the classes have font families set to these.