Home | Math Display Experiments | Using MathJax fonts outside of MathJax

Using KaTeX (and MathJax) fonts outside of KaTeX (and MathJax)

Page last updated: 13 Nov 2017.

Overview

Some time ago I converted all math images on IntMath to MathJax, and subsequently to KaTeX.

Rather than converting the thousands of remaining sundry math snippets (which used italics, subscripts, superscripts or a CSS class) to MathJax (which would take forever), I've styled them to look like KaTeX output so everything looks more consistent.

This page allows easy browser comparisons of styled math snippets with MathJax and KaTeX output.

The gray horizontal lines enclose the height of letters a, c, e, m, n, etc when using Arial at 1em font-size.

CSS

@font-face{font-family:KaTeX_Math; src:url('/includes/cssjs/katex/fonts/KaTeX_Math-Italic.woff2') format('woff');
    font-weight:400;
    font-style:normal}
@font-face{font-family:KaTeX_Math; src:url('/includes/cssjs/katex/fonts/KaTeX_Math-Italic.woff2') format('woff');
    font-weight:400;
    font-style:italic}	

@font-face{font-family:KaTeX_Main; src:url('/includes/cssjs/katex/fonts/KaTeX_Main-Regular.woff2') format('woff');
    font-weight:400;
    font-style:normal}
@font-face{font-family:KaTeX_Main; src:url('/includes/cssjs/katex/fonts/KaTeX_Main-Italic.woff2') format('woff');
    font-weight:400;
    font-style:italic}
sup,sub,.intmath{font-family:KaTeX_Main,"Times New Roman",Times,serif}
i,em{font-family:KaTeX_Math,"Times New Roman",Times,serif;font-style:normal}
.intmath{white-space:nowrap}
.intmathItalic{font-family:KaTeX_Math,"Times New Roman",Times,serif;font-style:normal}
sup, sub{font-size:0.8em}
.intmath, .intmathItalic{font-size:1.15em}
.intmath sup, .intmath sub, .intmathItalic sup, .intmathItalic sub{font-size:0.7em}
i, em{font-size:1.15em}
.intmath i, .intmath em{font-size:1em}
#content sup, #wrapper sup{margin-left:1px}


Comparison Table

Processed by KaTex Process with MathJax

HTML tags using class "intmath"
(with KaTeX fonts)
Processed by KaTeX

Baseline a2 sin(θ) + b2 = c2

Baseline `a^(2sin(theta))+b^2=c^2`

Baseline x2 + y3 = sin θ

Baseline `x^2+y^3=sin theta`

Baseline x = 0 to x = π

Baseline `x=0` to `x=pi`

Baseline (1 − cos2 α) = sin2 α

Baseline `(1-cos^2 alpha)` `=sin^2 alpha`

Baseline sin2 θ + cos2 θ = 1

Baseline `sin^2 theta + cos^2 theta=1`

Baseline As x → −∞, dy/dx → 1

Baseline As `x-> -oo`, `dy//dx -> 1`

Baseline dy = 1 dy

Baseline `int dy = int1 dy`

Baseline f(x) = (5x + 7θ)b = 7

Baseline `f(x)` `=(5^x+7^theta)^b=7`

Baseline f(x) = x2, so f(3)=6

Baseline `f(x)=x^2`, so `f'(3)=6`

Baseline θ = 15

Baseline `theta=15^@`

Baseline y = x1/2

Baseline `y=x^(1//2)`

Baseline P(t) = pQ

Baseline `P(t)=pQ`

(uses <p class="intmath"> ...</span>

a1/n × a1/n ... × a1/n = a

Baseline `a^(1//n)xxa^(1//n)...` `xxa^(1//n) = a`

Baseline (x1, y1) and (x2, y2)

Baseline `(x_1,y_1)` and `(x_2,y_2)`

(This one uses "intmathItalic" class. There is no need to add <i>, <em> tags for math symbols.)
Baseline F(θ + q0) = 5αζx2

Baseline `F(θ + q_0) = 5αζx^2`

(This one uses <i> and <em> only - not "intmath" class)
Baseline The x- and y-intercepts ...

Baseline The `x`- and `y`-intercepts ...

(This uses <i>, <em>, <sub> and <sup> - not "intmath" class)
Baseline Find x1 + y5 = √(σ)

Baseline Find `x_1+y^5=sqrt(sigma)`

Capitals and numbers

The first one in each group is a capital letter using default font, the second is italic, and the third is KaTeX:

A A `A` B B `B` C C `C` D D `D` K K `K` P P `P` Q Q `Q` R R `R` X X `X` Y Y `Y` Z Z `Z`

The first one in each group uses default font, and the second is KaTeX:

0 `0` 1 `1` 5 `5` 7 `7` 8 `8` 9 `9`

Font sizes and readability

Occasionally, odd things happen at different pixel sizes. This shows how the math looks for a range of font sizes.

Some observations:

Currently: KaTeX fonts, KaTeX rendering

PixelsemResult
14.0 0.87500 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.1 0.88125 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.2 0.88750 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.3 0.89375 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.4 0.90000 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.5 0.90625 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.6 0.91250 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.7 0.91875 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.8 0.92500 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
14.9 0.93125 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.0 0.93750 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.1 0.94375 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.2 0.95000 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.3 0.95625 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.4 0.96250 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.5 0.96875 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.6 0.97500 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.7 0.98125 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.8 0.98750 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
15.9 0.99375 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.0 1.00000 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.1 1.00625 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.2 1.01250 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.3 1.01875 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.4 1.02500 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.5 1.03125 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.6 1.03750 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.7 1.04375 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.8 1.05000 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
16.9 1.05625 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.0 1.06250 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.1 1.06875 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.2 1.07500 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.3 1.08125 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.4 1.08750 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.5 1.09375 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.6 1.10000 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.7 1.10625 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.8 1.11250 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
17.9 1.11875 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.0 1.12500 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.1 1.13125 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.2 1.13750 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.3 1.14375 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.4 1.15000 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.5 1.15625 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.6 1.16250 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.7 1.16875 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.8 1.17500 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
18.9 1.18125 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`
19.0 1.18750 sin2 θ + 6 ÷ 3 − 2 ≤ 0 `dy/dx`

Search IntMath, blog and Forum