Font

By changing the variables in the src/styles/fonts.scss file, you can change several properties of how KaTeX uses fonts.

Font size and lengths

By default, KaTeX math is rendered in a 1.21× larger font than the surrounding context, which makes super- and subscripts easier to read. You can control this using CSS, for example, to set to 1.1×:

.katex { font-size: 1.1em; }

KaTeX supports all TeX units, including absolute units like cm and in. Absolute units are currently scaled relative to the default TeX font size of 10pt, so that \kern1cm produces the same results as \kern2.845275em. As a result, relative and absolute units are both uniformly scaled relative to LaTeX with a 10pt font; for example, the rectangle \rule{1cm}{1em} has the same aspect ratio in KaTeX as in LaTeX. However, because most browsers default to a larger font size, this typically means that a 1cm kern in KaTeX will appear larger than 1cm in browser units.

Kinds of fonts used

KaTeX provides fonts in three different formats: ttf, woff, and woff2.

  • ttfs are included to support very old browsers and local installation. Browser support
  • woff is the format that is most widely supported (all modern browsers support it), so it probably provides the most benefit to being included. Browser support
  • woff2s are included for modern browsers, because they are much smaller and faster to load. Browser support

KaTeX will automatically include only necessary fonts for target environments specified by Browserslist config.

To force a font type to be included or excluded, set USE_(FONT NAME) environment variable to "true" or "false", respectively, during the build process.

Alternatively, if you use Sass, you can include src/styles/katex.scss directly with variable overrides:

@use 'node_modules/katex/src/styles/katex' with (
  $use-ttf: false;
  $use-woff: false;
  $use-woff2: true;
);

Location of font files

The default build of KaTeX expects the KaTeX fonts to be located in a directory called fonts which is a sibling of the katex.min.css stylesheet. This can be changed as follows:

  1. Find the sassVariables variable in webpack.common.js. This is a string, and you add at the start or end of it $font-folder: "${fontLocation}";\n, with fontLocation pointing to the location of your fonts. Alternatively you can replace value in src/styles/fonts.scss file. It is possible to use relative or absolute paths, so setting it to "/fonts" would cause it to search for the fonts in a root fonts folder, while "../fonts" would search in a fonts directory one level above the katex.min.css file.
  2. Rebuild KaTeX by running yarn build from the top-level directory.
  3. Use the newly generated dist/katex.min.css file, and place the fonts where you indicated.

Alternatively, if you use Sass, you can include src/styles/katex.scss directly with a variable override:

@use 'node_modules/katex/src/styles/katex' with (
  $font-folder: "path/to/fonts"
);
← Handling ErrorsSupported Functions →