Molecule.dev

@molecule/app-fonts-arimo

Provider bond · fonts · App (browser) · v1.0.2 · Apache-2.0

Clean sans-serif, metrically compatible with Arial (local fonts)

npm install @molecule/app-fonts-arimo

npm · Source on GitHub · Implements @molecule/app-fonts

How it works

@molecule/app-fonts-arimo 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-arimo'

setFont(font) // once, at app startup — before first paint

Works with: @molecule/app-fonts

Reference

Arimo font bond for molecule.dev — a clean sans-serif, metrically compatible with Arial. Exports a ready-made FontDefinition (font, role sans) with locally-served TTF faces (regular 400, bold 700, variable 100-1000).

Quick Start

import { setFont } from '@molecule/app-fonts'
import { font } from '@molecule/app-fonts-arimo'

setFont(font) // once, at app startup — before first paint

Type

provider

Installation

npm install @molecule/app-fonts-arimo @molecule/app-fonts

API

Constants

font

Arimo font definition — clean sans-serif, metrically compatible with Arial.

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

  • Wire with setFont() from @molecule/app-fonts, never a raw bond('font', …) — setFont() is what sets the --mol-font-sans CSS variable and injects the @font-face rules; a raw bond registers the definition but renders nothing.

  • Serve this package's fonts/ directory at the public path /fonts/ (e.g. copy node_modules/@molecule/app-fonts-arimo/fonts/* to the app's public/fonts/). Every @font-face src is /fonts/<file>; missing files silently 404 and the fallback stack renders instead.

  • Fills the sans role only — serif/mono stay on system stacks unless another font bond is wired. Consume via var(--mol-font-sans), never a hardcoded font-family.