How defmikekoh/a-font-face-off works
A Font Face-off is a Firefox Android extension for choosing fonts, previewing comparisons, and applying per-domain typography to web pages. The primary workflow runs from the popup’s font and mode controls through saved settings to the content script, which applies styles and loads fonts in the page. Separate branches cover on-page Quick Pick and toolbar actions, font detection, Substack Roulette, options management, and optional cloud sync. The README documents these capabilities; sampled source supports the main popup/content/storage and options/background relationships, while some unsampled wiring is left out.
Main entry points: content.js Page Style Runtime · popup.js Font Popup · background.js Background Coordinator · options.js Options UI
Components 18
Extension UI
- Font Popup
src/popup.js - Options UI
src/options.js
Page Features
- Quick Pick Toolbar
src/left-toolbar.js - Substack Roulette
src/content-sroulette-runtime.js - Font Detection
src/whatfont_core.js
Font Runtime
- Page Style Runtime
src/content.js - Font Picker
src/font-picker.js - Font Swap Helpers
src/font-swap-utils.js - Font Face Capture
src/page-font-face-capture.js - CSS Generation
src/css-generators.js
Settings and Sync
- Extension Settings
- Background Coordinator
src/background.js
Other components
- User
- Web Page
- Google Drive
- WebDAV
- Google Fonts
- SIL Font Mirror
Connections 24
- User → Font Popup: chooses fonts
- Font Popup → Extension Settings: reads and saves
- Font Popup → Page Style Runtime: coordinates apply
- Page Style Runtime → Extension Settings: loads settings
- Page Style Runtime → Web Page: applies styles
- Page Style Runtime → Google Fonts: loads fonts
- Page Style Runtime → Font Swap Helpers: uses helpers
- Page Style Runtime → CSS Generation: generates styles
- Font Popup → Font Picker: selects fonts
- Font Popup → Font Face Capture: captures page fonts
- User → Quick Pick Toolbar: opens Quick Pick
- Quick Pick Toolbar → Extension Settings: reads favorites
- Quick Pick Toolbar → Page Style Runtime: requests font apply
- User → Font Detection: requests detection
- Font Detection → Web Page: inspects rendered fonts
- Substack Roulette → Extension Settings: reads roulette settings
- Substack Roulette → Page Style Runtime: triggers font apply
- User → Options UI: configures extension
- Options UI → Extension Settings: manages settings
- Options UI → Background Coordinator: requests sync actions
- Background Coordinator → Extension Settings: reads and updates
- Background Coordinator → Google Drive: syncs configuration
- Background Coordinator → WebDAV: syncs configuration
- Page Style Runtime → SIL Font Mirror: loads SIL fonts