# defmikekoh/a-font-face-off architecture

> Architecture diagram of the GitHub repository defmikekoh/a-font-face-off, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/defmikekoh/a-font-face-off
- Repository: https://github.com/defmikekoh/a-font-face-off
- Video tour (about a minute): https://gitdiagram.com/defmikekoh/a-font-face-off/video

## Overview

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: [`src/content.js`](https://github.com/defmikekoh/a-font-face-off/blob/main/src/content.js) (Page Style Runtime), [`src/popup.js`](https://github.com/defmikekoh/a-font-face-off/blob/main/src/popup.js) (Font Popup), [`src/background.js`](https://github.com/defmikekoh/a-font-face-off/blob/main/src/background.js) (Background Coordinator), [`src/options.js`](https://github.com/defmikekoh/a-font-face-off/blob/main/src/options.js) (Options UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Extension UI"]
  node_popup["Font Popup<br/>[popup.js]"]
  node_options["Options UI<br/>[options.js]"]
end

subgraph group_page["Page Features"]
  node_toolbar["Quick Pick Toolbar<br/>[left-toolbar.js]"]
  node_roulette["Substack Roulette"]
  node_whatfont["Font Detection<br/>[whatfont_core.js]"]
end

subgraph group_core["Font Runtime"]
  node_content["Page Style Runtime<br/>[content.js]"]
  node_fontpicker["Font Picker<br/>[font-picker.js]"]
  node_fontswap["Font Swap Helpers<br/>[font-swap-utils.js]"]
  node_fontface["Font Face Capture"]
  node_css["CSS Generation<br/>[css-generators.js]"]
end

subgraph group_sync["Settings and Sync"]
  node_storage[("Extension Settings")]
  node_background["Background Coordinator<br/>[background.js]"]
end

node_user(("User"))
node_webpage["Web Page"]
node_gdrive["Google Drive"]
node_webdav["WebDAV"]
node_googlefonts["Google Fonts"]
node_sil["SIL Font Mirror"]

node_user -->|"chooses fonts"| node_popup
node_popup -->|"reads and saves"| node_storage
node_popup -->|"coordinates apply"| node_content
node_content -->|"loads settings"| node_storage
node_content -->|"applies styles"| node_webpage
node_content -.->|"loads fonts"| node_googlefonts
node_content -->|"uses helpers"| node_fontswap
node_content -->|"generates styles"| node_css
node_popup -->|"selects fonts"| node_fontpicker
node_popup -->|"captures page fonts"| node_fontface
node_user -->|"opens Quick Pick"| node_toolbar
node_toolbar -->|"reads favorites"| node_storage
node_toolbar -->|"requests font apply"| node_content
node_user -->|"requests detection"| node_whatfont
node_whatfont -->|"inspects rendered fonts"| node_webpage
node_roulette -->|"reads roulette settings"| node_storage
node_roulette -->|"triggers font apply"| node_content
node_user -->|"configures extension"| node_options
node_options -->|"manages settings"| node_storage
node_options -->|"requests sync actions"| node_background
node_background -->|"reads and updates"| node_storage
node_background -.->|"syncs configuration"| node_gdrive
node_background -.->|"syncs configuration"| node_webdav
node_content -.->|"loads SIL fonts"| node_sil

click node_popup "https://github.com/defmikekoh/a-font-face-off/blob/main/src/popup.js"
click node_options "https://github.com/defmikekoh/a-font-face-off/blob/main/src/options.js"
click node_toolbar "https://github.com/defmikekoh/a-font-face-off/blob/main/src/left-toolbar.js"
click node_roulette "https://github.com/defmikekoh/a-font-face-off/blob/main/src/content-sroulette-runtime.js"
click node_whatfont "https://github.com/defmikekoh/a-font-face-off/blob/main/src/whatfont_core.js"
click node_content "https://github.com/defmikekoh/a-font-face-off/blob/main/src/content.js"
click node_fontpicker "https://github.com/defmikekoh/a-font-face-off/blob/main/src/font-picker.js"
click node_fontswap "https://github.com/defmikekoh/a-font-face-off/blob/main/src/font-swap-utils.js"
click node_fontface "https://github.com/defmikekoh/a-font-face-off/blob/main/src/page-font-face-capture.js"
click node_css "https://github.com/defmikekoh/a-font-face-off/blob/main/src/css-generators.js"
click node_background "https://github.com/defmikekoh/a-font-face-off/blob/main/src/background.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_popup,node_options,node_user toneBlue
class node_toolbar,node_roulette,node_whatfont toneAmber
class node_content,node_fontpicker,node_fontswap,node_fontface,node_css toneMint
class node_storage,node_background toneRose
class node_webpage,node_gdrive,node_webdav,node_googlefonts,node_sil toneIndigo
```

## Components

### Extension UI

- [Font Popup](https://github.com/defmikekoh/a-font-face-off/blob/main/src/popup.js): `src/popup.js`
- [Options UI](https://github.com/defmikekoh/a-font-face-off/blob/main/src/options.js): `src/options.js`

### Page Features

- [Quick Pick Toolbar](https://github.com/defmikekoh/a-font-face-off/blob/main/src/left-toolbar.js): `src/left-toolbar.js`
- [Substack Roulette](https://github.com/defmikekoh/a-font-face-off/blob/main/src/content-sroulette-runtime.js): `src/content-sroulette-runtime.js`
- [Font Detection](https://github.com/defmikekoh/a-font-face-off/blob/main/src/whatfont_core.js): `src/whatfont_core.js`

### Font Runtime

- [Page Style Runtime](https://github.com/defmikekoh/a-font-face-off/blob/main/src/content.js): `src/content.js`
- [Font Picker](https://github.com/defmikekoh/a-font-face-off/blob/main/src/font-picker.js): `src/font-picker.js`
- [Font Swap Helpers](https://github.com/defmikekoh/a-font-face-off/blob/main/src/font-swap-utils.js): `src/font-swap-utils.js`
- [Font Face Capture](https://github.com/defmikekoh/a-font-face-off/blob/main/src/page-font-face-capture.js): `src/page-font-face-capture.js`
- [CSS Generation](https://github.com/defmikekoh/a-font-face-off/blob/main/src/css-generators.js): `src/css-generators.js`

### Settings and Sync

- **Extension Settings**
- [Background Coordinator](https://github.com/defmikekoh/a-font-face-off/blob/main/src/background.js): `src/background.js`

### Other components

- **User**
- **Web Page**
- **Google Drive**
- **WebDAV**
- **Google Fonts**
- **SIL Font Mirror**

## Connections

- 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