Fonts

The fonts decide the size of the text, so they change the layout as well as the pixels. By default, a page only uses the fonts bundled with the library and its own web fonts: the same page gives the same layout and the same screenshots on every machine.

Bundled fonts

The bundled fonts cover the Latin, Greek and Cyrillic scripts, in regular, bold, italic and bold italic. A page that names Arial, Helvetica, Times New Roman, Times, Courier New or Courier gets the metric-compatible bundled font: its text has the same size as with the original font. cursive and fantasy use the serif font, as on a system that has no such font. emoji has no bundled font.

By default, the characters that no font of the page and no bundled font has are not drawn: the emoji and the text of the other scripts (Chinese, Japanese, Korean, Arabic, Hebrew, Devanagari, Thai...) leave empty space. Give the page a web font that has them, or use the fonts of the machine.

Web fonts

The @font-face rules of the pages load their fonts through the DocumentLoader (TrueType, OpenType, WOFF and WOFF2), and document.fonts (the CSS Font Loading API) loads them from scripts. A font face can also come from data (new FontFace(name, bytes)).

Fonts of the machine

BrowsingContextOptions.UseSystemFonts lets font-family and local() name the fonts installed on the machine:

using var context = new BrowsingContext(new BrowsingContextOptions
{
    UseSystemFonts = true, // font-family and local() can name the fonts installed on the machine
    RenderingBackend = new ImagingRenderingBackend(),
});

context.Navigate("https://example.com/", _ => """<p style="font-family: 'Segoe UI', sans-serif">Hello</p>""");
using var screenshot = context.TakeScreenshot(); // the pixels depend on the fonts of the machine

• The bundled fonts keep their names and the generic families: only the families that the bundled fonts do not have come from the machine, and the default font does not change.
• The characters that neither the fonts of the page nor the bundled fonts have are drawn with a font of the machine that has them, as browsers do: the fonts that browsers use for emoji and for the scripts on macOS, Windows and Linux first (such as PingFang SC, Microsoft YaHei, Noto Sans CJK, Geeza Pro, Nirmala UI), then any other installed font. The color emoji font of macOS is too large to be read, so the emoji are not drawn there.
• The layout and the screenshots then depend on the machine. Keep it off when you compare screenshots, or when the pages are untrusted.