What The Font is a Chrome extension that makes websites easier to read if you have dyslexia or similar reading challenges. It can make the web easier to read (typography, spacing, calmer visuals) for people who benefit from those adjustments, and it can help raise awareness about the disability by approximating how fragmented reading can feel. We wanted something practical for learners and a conversation starter for families and educators.

The web is full of tiny text, tight spacing, and ads. Kids who skip words are often called “lazy” - but sometimes the page is the problem, not the kid. In many places, dyslexia and reading differences are easy to miss. This extension provides help right in the browser: clearer pages, optional “walk in their shoes” mode, and tools that turn text into something easier to take in.

1. You turn on Assist or the simulator from the popup.
2. You select text on any site → a bar appears → Summarize or Read aloud.
3. You open options or Image & video → photo → Vision gives you text.
4. You sign in → open the dashboard to see progress-style stats (demo for now).

• Easier font (Lexend), bigger minimum text, more space between lines, letters, and words
• Softer background and a gentle color gradient on text to guide the eye
• Hides a lot of ads so the page feels calmer

• Makes words on the page feel unstable on purpose for raising awareness

• Summarize — shorten a paragraph into a small card
• Read aloud — listen instead of reading only

• Upload a picture or use your camera; get text scanned from the image

• Sign up / log in so the app can recognize you later
• Dashboard shows streaks, weekly activity, and what kinds of help you used

Extension (what runs in Chrome)
TypeScript, HTML, CSS · Vite + CRXJS (builds the extension) · Chrome Manifest V3 · Gemini, ElevenLabs, Google Cloud Vision · Lexend font package

Small backend (accounts)
Node.js + Express · MongoDB · safe passwords (Argon2) · login tokens (JWT) · Zod for checking input

WhatTheFont/
├── src/                    # All extension UI + logic
│   ├── content/            # Runs on every website (assist, toolbar, simulator)
│   ├── popup/              # Little menu when you click the extension icon
│   ├── extract/            # Settings page (API keys + photo → text)
│   ├── imageVideo/         # Extra page for camera / upload
│   ├── dashboard/          # Progress screen after login
│   ├── auth/               # Sign in / sign up screens
│   └── background/         # Invisible worker: calls Gemini & ElevenLabs
├── server/                 # Small API for register / login / logout
└── dist/                   # Appears after `npm run build` — this is what you load in Chrome

git clone <your-repo-url>
cd WhatTheFont

npm install

This downloads JavaScript libraries (like the font pack and the Chrome build tool). You only do this once (or again after package.json changes).

npm run server:install

Same idea, but for the server/ folder (Express, MongoDB driver, etc.).

A. Optional — root .env (copy from .env.example)

• Lets you bake in a Vision API key at build time, or leave blank and paste the key in the extension options instead.

B. Required for login — server/.env (copy from server/.env.example)

• MongoDB connection string
• JWT secret and pepper for refresh tokens (the example file explains how to generate them)

Never upload real .env files to GitHub.

npm run build

This creates the dist/ folder. In Chrome: ⋮ → Extensions → Developer mode → Load unpacked → pick dist.

npm run server:dev

Keeps the server running on http://127.0.0.1:8787 (default). The extension talks to that address for register / login.

npm run dev

Starts live reload for faster extension development; you still load dist in Chrome and hit reload when needed.

Open extension options (Text extraction): add Gemini, ElevenLabs, and Vision if you use photo → text. Keys stay on your computer in Chrome storage.

https://youtu.be/jgsuR_wiTq8?si=vwj9Ks99pu6tpRJx