@molecule/app-fonts-system
Provider bond · fonts · App (browser) · v1.0.2 · Apache-2.0
Native OS font stack — zero network requests, fastest load
npm install @molecule/app-fonts-systemnpm · Source on GitHub · Implements @molecule/app-fonts
How it works
@molecule/app-fonts-system is a provider bond on the app (browser) side: it implements the fonts core interface (@molecule/app-fonts) with a concrete vendor or library behind it.
Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.
import { setFont } from '@molecule/app-fonts'
import { font } from '@molecule/app-fonts-system'
setFont(font) // once, at app startupWorks with: @molecule/app-fonts
Reference
System font bond for molecule.dev — the native OS font stack (system-ui
with platform fallbacks). Zero font files, zero network requests, instant
first paint. Exports a ready-made FontDefinition (font, role sans).
Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit
src/index.tsJSDoc, not this file.
Quick Start
import { setFont } from '@molecule/app-fonts'
import { font } from '@molecule/app-fonts-system'
setFont(font) // once, at app startup
Type
provider
Installation
npm install @molecule/app-fonts-system @molecule/app-fonts
API
Constants
font
System font definition — native OS fonts, zero network requests.
const font: FontDefinition
Core Interface
Implements @molecule/app-fonts interface.
Injection Notes
Requirements
Peer dependencies:
@molecule/app-fonts^1.0.1
Runtime Dependencies
-
@molecule/app-fonts -
Nothing to serve or copy — there are no font files;
setFont()only sets--mol-font-sansto the system stack. -
Wire with
setFont()from@molecule/app-fonts, never a rawbond('font', …)— the CSS variable is only set bysetFont(). -
Fills the
sansrole only;serif/monokeep their own system defaults.