Loading Strategy Reference

All premium fonts below are SIL OFL 1.1 — free for any use (commercial, bundled, web-served). System fonts are proprietary to their platform but available on every device running that OS.

Bundle size comparison

Font	Variable WOFF2 (latin)	Weight range	Optical sizing	Tabular numerals
Inter	~96 KB	100–900	Yes	Yes
IBM Plex Sans	~80 KB	100–700	No	Yes
Source Sans 3	~75 KB	200–900	No	Yes (font-feature-settings: "tnum")
Nunito Sans	~70 KB	200–1000	No	No
DM Sans	~65 KB	100–1000	No	No

Google Fonts CDN (web serving)

Single <link> tag loads one font with all weights needed by Bristlenose (400, 500, 600, 700):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Pick one: -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400..700&display=swap" rel="stylesheet">

Self-hosted / Electron bundling

Download the variable WOFF2 from google/fonts on GitHub (or the "Download family" button on Google Fonts). Place in your assets/fonts/ directory and declare:

@font-face {
    font-family: "Inter";
    src: url("./fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    font-optical-sizing: auto;
}

For Electron: reference fonts with a relative path from your HTML entry point. The WOFF2 file ships inside your .asar package. No CDN dependency, no network latency. Total overhead: 65–96 KB for one variable font covering all weights.

Recommended loading strategy

• font-display: swap — shows system fallback instantly, swaps when loaded. Avoids flash of invisible text.
• Preload the primary font for above-the-fold content: <link rel="preload" href="fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
• Variable fonts — one file covers all weights (400–700+). Fewer HTTP requests, smaller total size than separate static files.
• Latin subset is sufficient for English-language research tools.
• Fallback stack — always include system fonts after the web font: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif

Ubuntu Sans download

For the Linux system font comparison in this mockup, download Ubuntu Sans from design.ubuntu.com/font. Place the variable .ttf in docs/mockups/fonts/.