Weblitz Preview

Fonts

Text is drawn with the first font that has it, in this order:

  1. the page's own fonts, loaded with @font-face from its folder (or the network, if allowed);
  2. the machine's installed fonts, by family name;
  3. the faces in the package: metric-compatible fonts for Arial, Helvetica, Times New Roman, Courier New, Calibri, Cambria and Segoe UI (Latin, Greek, Cyrillic and Hebrew letters), so a page naming them lays out with the same widths everywhere.

With UseInstalledFonts false, the machine's fonts are left out: only the page's fonts and the bundled faces draw, and the same input gives the same PDF on every machine. The fonts example shows both on a Mac: families the Mac has (Helvetica Neue, Avenir, Japanese) fall to the next family without its fonts.

What a missing font does

A family nobody has goes to the next one in the list, as in Chrome, and a character no font has is drawn as an empty box. Both are reported as notes (fontFamilyMissing, missingGlyph): check them when a page's text looks wrong.

Linux containers

A container image has few fonts, often none. The bundled faces cover Latin, Greek, Cyrillic and Hebrew text in the families above; Arabic, Chinese, Japanese, Korean, Thai, the Indic scripts and emoji need fonts installed in the image. The Noto families cover them; on an image with apt:

RUN apt-get update && apt-get install -y --no-install-recommends \
    fonts-noto-core fonts-noto-cjk fonts-noto-color-emoji && rm -rf /var/lib/apt/lists/*

On Alpine, add the gcompat package too (Weblitz's script engine is built for glibc) and fontconfig:

RUN apk add --no-cache gcompat fontconfig font-noto font-noto-arabic font-noto-cjk font-noto-emoji

Or ship the fonts with your pages: @font-face fonts in a page's folder are used first on every machine.