Rendering LaTeX math without JavaScript

Recently, I found out about MathML Core, which allows browsers to render mathematical notation in HTML without the need for a JavaScript library or converting to images. This got me very excited because I can add LaTeX math rendering to my SSG ¹ without having to use JavaScript!

So, obviously I spent the day adding this feature to my SSG. Unfortunately, for pages that use MathML, a math font has to be loaded, and they are quite large. I am using Libertinus, which is 396kB! In comparison to my other assets, it's huge! For comparison, the sum of all other assets on this page is less than 10kB.

Anyways, here's a POC:

Rendered

Prefixed Closeness

Let $\varphi$ be a set of feasible traces. If ${\tau }_1{\tau }_2\in \varphi$ then ${\tau }_1\in \varphi$

HTML

Let 
<math>
    <mi>ϕ</mi>
</math>
be a set of feasible traces.
If 
<math>
    <msub>
        <mi>τ</mi>
        <mn>1</mn>
    </msub>
    <msub>
        <mi>τ</mi>
        <mn>2</mn>
    </msub>
    <mo>∈</mo>
    <mi>ϕ</mi>
</math>
then 
<math>
    <msub>
        <mi>τ</mi>
        <mn>1</mn>
    </msub>
    <mo>∈</mo>
    <mi>ϕ</mi>
</math>

Markdown

Let $\phi$ be a set of feasible traces.
If $\tau_1\tau_2\in\phi$ then $\tau_1\in\phi$