A lightweight, client-side font preview tool. Upload any custom font file and instantly see how it renders on your text — no server, no refresh, no dependencies.
Modern AI-generated websites often ship with questionable font choices. Fooontipo lets you quickly test and compare fonts before committing them to a project, so you can make informed typographic decisions.
- Drag-and-drop upload — supports
.ttf,.otf,.woff,.woff2 - Live preview — text updates in real-time as you type
- Typography controls — font size, weight, line height, letter spacing
- Multi-font comparison — upload multiple fonts and compare side-by-side
- Sample text presets — pangram, alphabet, numbers & symbols, heading + body
- Dark preview mode — toggle dark background to check contrast
- Fully offline — all processing happens in the browser via the FontFace API
| Layer | Technology |
|---|---|
| Structure | HTML |
| Styling | Vanilla CSS |
| Logic | Vanilla JavaScript (FontFace API + FileReader) |
| Icons | Google Material Icons (CDN) |
| Build tool | None |
Total footprint: 3 files — index.html, style.css, app.js.
Clone the repository and serve the files with any static server.
git clone https://github.com/<your-username>/fooontipo.git
cd fooontipoThen open index.html in your browser, or serve it locally:
# Using Python
python -m http.server 8000
# Using PHP
php -S localhost:8000
# Using Node (npx)
npx serve .No installation, no build step required.
- User selects or drops a font file into the upload zone
- The file is read as an
ArrayBufferusing the FileReader API - A
FontFaceobject is created and added todocument.fonts - The preview area applies the loaded font via inline
font-family - Everything runs client-side — nothing leaves the browser
- Monochrome — black, white, and gray palette for a neutral testing environment
- Minimal border radius — max 4px, keeping the interface sharp and clean
- Constrained width — capped at 1200px for comfortable reading
- Zero emoji — Material Icons only, for visual consistency
- Lightweight — no framework, no bundler, no external JS dependency
MIT
Built for anyone who cares about typography.